Question

我一直无法创建包含浮动子DIV的父DIV。

<div id="parent">
    <div class="child1">content</div>    
    <div class="child2">content</div>
    <div class="child3">taller content</div>
</div>

...其中#parent将垂直展开（如果按照那种方式设置了填充）以容纳.child3.如果我在#parent附近添加了边框，那么它将包含所有三个孩子的DIV。

这种安排的最佳方式是什么才能确保这种行为？

寻找最佳实践。

Answer 1

您可以在父级中添加“wrapper”div，也可以在其中添加“clear：both”元素。检查此jsFiddle http://jsfiddle.net/yvVP8/

<div id="parent">
    <div id="wrapper">
        <div class="child1">content</div>
        <div class="child2">content</div>
        <div class="child3">taller content lala lala lalal lala</div>
    </div>
    <div class="clear"></div>
</div>

和css：

#parent {
    border: 1px solid #000;
    width: 300px;
}

#wrapper .child1, #wrapper .child2, #wrapper .child3 {
    float: left;
    padding: 5px;
    width: 90px;
}

div.clear {
    clear: both;
}

Answer 2

一个简单的

#parent {
    overflow:hidden;
}

将完成这项工作：

http://jsfiddle.net/XAbhY/

Answer 3

您只需将float:left;添加到父div即可。

它应该强制父母的大小/边界包裹所有兄弟姐妹。不确定它是否有效，但对我有效。

使父DIV包含浮动chid DIV

3 个答案: