Html 如何让父div和它的孩子一起成长？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4697578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a parent div grow with its children?
提问by funk-shun
How do I make a parent/container DIV grow as more children DIV's are added.
当添加更多子 DIV 时，如何使父/容器 DIV 增长。
<div id="container">
<div id="child" style="height:100px;">
</div>
<div id="child2" style="height:100px;">
</div>
</div>
回答by Naatan
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:
您的父 div 不会随其内容增长的唯一原因是，如果它的内容是绝对定位的或正在使用浮点数，在前一种情况下，除了使用 javascript 调整大小外，您无能为力，在后者中，您可以输入以下内容浮动元素末尾的代码：
<br style="clear: both">
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>
You can use any node, as long as you use "clear: both" on it (So <div style="clear: both"></div>would work too).
你可以使用任何节点，只要你在它上面使用“clear: both”（所以<div style="clear: both"></div>也可以）。
回答by Michael Irigoyen
If the content inside your <div>is floated, it won't expand. You can easily fix this by placing the overflow:hiddenCSS style to the parent <div>. Note, this will not work if the children are all positioned absolutely. When you absolutely position an element, you're taking it out of the document flow. As far as positioning is concerned, that element is no longer a "child", even though semantically it still is.
如果您的内容<div>是浮动的，则不会展开。您可以通过将overflow:hiddenCSS 样式放置到 parent来轻松解决此问题<div>。请注意，如果孩子都绝对定位，这将不起作用。当您绝对定位一个元素时，您就是将它从文档流中取出。就定位而言，该元素不再是“孩子”，即使在语义上它仍然是。
<div style="overflow:hidden">
<div style="float:left">
<!--Content-->
</div>
<div style="float:left">
<!--Content-->
</div>
</div>
回答by Jorge
Using display:table in the parent div makes it grow even if its contents are floating elements. It makes the div behave like a table, basically.
在父 div 中使用 display:table 使其增长，即使其内容是浮动元素。基本上，它使 div 表现得像一张桌子。
Take a look to the display properties: http://www.w3.org/wiki/CSS/Properties/display
回答by thelimarenan
Usually I create a fix class:
通常我创建一个修复类：
.clearfix{clear:both;}
Then, you can always use that when you need to.
然后，您可以随时使用它。
<div class='wrapperContainer'>
<div class="classFloated">
Content
</div>
<div class="clearfix"></div>
<div class="classFloated">
Content
</div>
<div class="clearfix"></div>
</div>
回答by JohnG
Adding display:flex to the parent div may work.
将 display:flex 添加到父 div 可能会起作用。
For example, I wanted an unknown number of circles in a row, centered within an absolutely positioned div that expands as more are added in.
例如，我想要一行中未知数量的圆圈，以绝对定位的 div 为中心，该 div 会随着添加的更多而扩展。
#grandparent{
width:300px;
height:20px;
position:absolute;
right:30;
bottom:30;
}
#parent{
transform: translateX(-50%);
left: 50%;
position: absolute;
display: flex;
}
.children{
background-color: white;
border-radius: 50%;
width: 16px;
height: 16px;
margin-left: 3px;
margin-right: 3px;
}
