javascript - 调整大小时如何更新包装内容div？

Question

我正在使用 jQuery Ui 通过拖动和调整大小来创建网格，元素具有不同类型的内容、文本和图像。当我调整元素的高度时，它不会随内容高度一起更新，例如。例如，不重新计算新的图像高度。

HTML

<div class="column">
    <div class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet">
        <div class="portlet-header">News</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content"><img src="https://s-media-cache-ak0.pinimg.com/736x/12/64/da/1264da4a3f18207dc22592102abae40d--frangipani-tattoo-plumeria-flowers.jpg"></div>
    </div>
</div>

JS

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true
    });

    $(".portlet").resize(function() {
        var myHeight = $(".portlet-content").scrollHeight;
        $(".portlet").outerHeight(myHeight);    
    });

    $(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});

JsFiddle here尝试使用图像调整框的大小，您会看到它没有更新其包装器高度

Answer 1

好的，看来我已经通过以下方式解决了它:

$(".portlet").resize(function() {
    $(".portlet").css("height", "auto");
});

并在 css 中提供:

.portlet-content {
    padding: 5px;
    height: 100%;
    float: left;
}

工作 jsFiddle

不确定这是否是最好的方法，但有效