jquery - 如何让我的父容器响应并在其 float 子容器长大时增加其高度？

Question

这是 fiddle http://jsfiddle.net/C5X44/2/

正如你所看到的，红色应该位于所有子元素的后面，因为它们是 float 的，它们不允许后面的 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" ))

    });

});

Answer 1

将 overflow:hidden; 添加到您的 .container css 中。澄清一下，当容器的子元素 float 时，容器将会折叠，使用 overflow:hidden; (不设置高度值)将允许容器自行清除 float 元素。

updated fiddle