如何在調整大小時更新包裝內容div？

我正在使用jQuery Ui創建一個具有拖動和調整大小的網格，元素具有不同類型的內容，文本和圖像。當我調整元素的高度時，它不更新內容高度，例如。例如，不重新計算新的圖像高度。如何在調整大小時更新包裝內容div？

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>

$(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嘗試用圖片大小的框，你會看到它並沒有更新其包裝高度

來源

2017-09-01 rob.m

OK的樣子我已經解決它說：

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

並在CSS提供：

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

工作jsFiddle

不知道這是否是最好的方法，但工程

來源

2017-09-01 14:58:58

似乎運作良好。您可能還想將'overflow：hidden;'添加到'.portlet'類來修復不包含文本的行。 – ivo

如何在調整大小時更新包裝內容div？

回答

相關問題