让父DIV附上漂浮的小孩DIV

我一直无法创建包含浮动子DIV的父DIV。让父DIV附上漂浮的小孩DIV

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

...（如果它被称呼这种方式与填充），以适应.child3.其中#parent将垂直扩展，如果我加了边框#parent会附上所有三个孩子的DIV。

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

寻找最佳实践。

来源

2011-10-02 jw60660

你在使用'clear'吗？ –

Bhesh，我正在清除每个新的父级div，因为我将一个页面堆叠为一个div：一个用于导航栏，另一个用于三列内容，然后另一个用于更多内容。但是，当我这样做，并尝试显示顶部和底部的边界，我看到父母不伸展覆盖子div。 – jw60660

您可以在父项中添加一个“包装器”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; 
}

来源

2011-10-02 14:47:23 oal

额外的'＃wrapper' div是不需要的，你可以使用'：after'这个伪元素和style元素。 '#parent：after {content：'';显示：块; clear：both;}' –

正确，但IE7及更早版本不支持'：after'。如果这不是问题，那么'：after'就是一样好（甚至更好）。 [来源]（http://www.quirksmode.org/css/contents.html#t15） – oal

谢谢你们。快速问题：额外的div，人们总是说在你的标记中避免太多的div。但似乎有必要得到我正在寻找的东西，除非我有机会打破IE7和更早浏览器的布局。每页有几个额外的div是否是一件大事？ – jw60660

简单

#parent { 
    overflow:hidden; 
}

将做的工作：

http://jsfiddle.net/XAbhY/

来源

2011-10-02 16:08:14 Darklg

您可以简单地将float:left;添加到父div。

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

来源

2012-10-12 00:19:49 IIIOXIII

让父DIV附上漂浮的小孩DIV

回答

相关问题