如何使父母与孩子一起成长？ [英] How to make a parent div grow with its children?

问题描述

如何使父级/容器DIV随着添加更多的子级DIV而增长。

How do I make a parent/container DIV grow as more children DIV's are added.

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

推荐答案

它的内容是如果它的内容是绝对定位或正在使用浮动，在前一种情况下，没有什么你可以做短缺调整它与JavaScript，在后者你可以把以下代码在你的浮动元素的结尾： p>

The only reason why your parent div would not grow with its content is if it's content is absolute positioned or is using floats, in the former case there is nothing you can do short of resizing it with javascript, in the latter you can put the following code at the end of your floating elements:

<br style="clear: both">

所以说，你的示例中的两个子元素都有一个float，代码看起来像这样

So say both the child elements in your example have a float, the code would look like this

<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 code>< div style =clear：both>< / div> ）。

You can use any node, as long as you use "clear: both" on it (So <div style="clear: both"></div> would work too).

这篇关于如何使父母与孩子一起成长？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！