html - 如何让父 div 与它的 child 一起成长？

Question

如何在添加更多子 DIV 时使父/容器 DIV 增长。

<div id="container">
     <div id="child" style="height:100px;">
     </div>
     <div id="child2" style="height:100px;">
     </div>
</div>

Answer 1

你的父 div 不会随着它的内容增长的唯一原因是它的内容是绝对定位的或者正在使用 float ，在前一种情况下你除了用 javascript 调整它的大小之外别无他法，在后一种情况下你可以将以下代码放在 float 元素的末尾:

<br style="clear: both">

假设您的示例中的两个子元素都有一个 float ，代码将如下所示

<div id="container">
     <div id="child" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
     <div id="child2" style="height:100px;">
           ** CONTENT GOES HERE **
           <br style="clear: both">
     </div>
</div>

您可以使用任何节点，只要您在其上使用“clear: both”即可(因此 <div style="clear: both"></div> 也可以)。