如何让父母与孩子一起成长？

Question

当添加更多儿童DIV时,如何使父/容器DIV增长.

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

Answer 1

你的父div不会随其内容增长的唯一原因是它的内容是绝对定位还是使用浮点数,在前一种情况下你没有什么可以做的,只需用javascript调整它的大小,在后者你可以把以下浮动元素末尾的代码:

<br style="clear: both">

所以说你的例子中的两个子元素都有一个浮点数,代码看起来像这样

<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>也可以使用).

Answer 2

如果你的内容<div>浮动,它将不会扩展.您可以通过将overflow:hiddenCSS样式放置到父级来轻松解决此问题<div>.请注意,如果孩子们都完全定位,这将不起作用.当您绝对定位元素时,您将其从文档流中取出.就定位而言,该元素不再是"孩子",即使在语义上它仍然存在.

<div style="overflow:hidden">
  <div style="float:left">
    <!--Content-->
  </div>
  <div style="float:left">
    <!--Content-->
  </div>
</div>