Question

正如你所看到的那样，红色应该在所有孩子身后，因为他们漂浮着他们不会让后面的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。为了澄清，容器将在子项浮动时崩溃，使用overflow: hidden;（不设置高度值）将允许容器自行清除浮动元素。

updated fiddle

Answer 2

经典浮动行为。

您可以将其添加到容器（罗盘拼接 - 明确）

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

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

如何允许我的父容器响应并在其浮动的子项增长时增加其高度？

2 个答案: