如何讓我的父容器響應並在浮動的孩子增長時增加它的高度？

這裏是小提琴http://jsfiddle.net/C5X44/2/如何讓我的父容器響應並在浮動的孩子增長時增加它的高度？

正如你可以看到紅色的應該是所有的留守兒童，因爲他們是浮動的，他們不會允許後面的DIV看到他們，然後展開。

我有一個「添加項目」按鈕，表明我不可能給一個固定的，因爲我無法知道我需要添加多少元素。除了使用Javascript手動添加像素到選定的類，當一個新的行形成時，我沒有想法。

代碼：

<div class="container"> 
    <button id="addItemBtn" type="button">Add Item</button> 

    <div id="sortable-container"> 
     <ul id="sortable"> 
      <li class="ui-state-default">1</li> 
      <li class="ui-state-default">2</li> 
      <li class="ui-state-default">3</li> 
      <li class="ui-state-default">4</li> 
      <li class="ui-state-default">5</li> 
      <li class="ui-state-default">6</li> 
      <li class="ui-state-default">7</li> 
      <li class="ui-state-default">8</li> 
      <li class="ui-state-default">9</li> 
      <li class="ui-state-default">10</li> 
      <li class="ui-state-default">11</li> 
      <li class="ui-state-default">12</li> 
     </ul> 
    </div> 
</div> 

.container{ 
    background-color:red; 
} 

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 450px; 
} 

#sortable li { 
    margin: 3px 3px 3px 0; 
    padding: 1px; float: left; 
    width: 100px; height: 90px; 
    font-size: 4em; 
    text-align: center; 
} 


    $(function() { 

     $("#sortable").sortable(); 
     $("#sortable").disableSelection();   

     $("#addItemBtn").click(function(){ 

     var item = $("#sortable").find("li").first().clone(true);   
     item.appendTo($("#sortable")) 

    }); 

});

來源

2014-02-18 Victorio Berra

添加overflow: hidden;您.container CSS。爲了澄清，當兒童漂浮時，容器會倒塌，使用overflow: hidden;（沒有設置高度值）將允許容器自我清理漂浮的元素。

updated fiddle

來源

2014-02-18 18:02:09 Skrivener

這個工作。你能澄清一下「自我清楚」的含義嗎？當我想清楚時，我想到刪除或空洞。 –

CSS有一個'clear'規則來強制元素出現在浮動元素下面。自清除是指強制容器元素包含任何浮動子元素，這不是默認行爲。谷歌「CSS清除浮動」，你會發現大量的閱讀材料:) – Skrivener

@ user3108526 https://developer.mozilla.org/en-US/docs/Web/CSS/clear – Bill

經典浮動行爲。

您可以添加到這個容器（指南針餅clearfix）

.container:after 
{ 
    content: ""; 
    display: table; 
    clear: both; 
}

http://jsfiddle.net/C5X44/3/

來源

2014-02-18 18:03:29

我認爲這是一個更好的答案，如[這裏由MDN解釋]（https://developer.mozilla.org/en-US/docs/Web/CSS/clear）。爲我工作得很好。 Skrivener也是這樣做的，但我不知道爲什麼它導致父容器移動到窗口的右側，就像漂浮一樣。 –

如何讓我的父容器響應並在浮動的孩子增長時增加它的高度？

回答

相關問題