如何使父级div随其子元素增长？

Question

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

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

- funk-shun

---

那不是默认行为吗？ - Orbling

它可以这样做，但是我该如何使其随着其子元素一起增长呢？例如，如果#container有一个边框，并且我希望该边框随着放入其中的任何内容自动增长。 - funk-shun

Orbling 表示它默认会随着孩子们成长而成长。 - BoltClock

什么......嗯，我不知道为什么我的代码之前没有运行 -__- - funk-shun

#container有哪些样式？ - BoltClock

我曾经遇到过同样的问题，后来通过这个答案解决了它：https://dev59.com/23VC5IYBdhLWcg3wqzHV - Marcio Mazzucato

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> 也可以使用）。

- Naatan

---

你可以在#container样式中添加 overflow: hidden，而不是使用 <br>。 - BoltClock

@BoltClock那只会隐藏超出父元素高度的任何内容。除非您指的是我不知道的一种技巧，如果是这样，请告诉我们更多 :) - Naatan

添加 overflow:hidden 的作用是因为许多 DOM 元素会完全忽略高度设置，除非明确指示这样做。使用 overflow:hidden 只对浮动的子元素有效。 - Michael Irigoyen

@Michael Irigoyen 你是否知道这个方便的小工具在浏览器兼容性方面的情况？所有浏览器和IE都实现了它吗？ - dudewad

Answer 2

如果你的 <div> 里面的内容被浮动了，那它将不会自动扩展高度。你可以通过在父级 <div> 上添加 overflow:hidden 的CSS样式来解决这个问题。需要注意的是，如果子元素都被绝对定位了，这种方法是不起作用的。当你给一个元素设置绝对定位时，它会脱离文档流。在定位方面，该元素不再是“子元素”，尽管从语义上说它仍然是。

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

- Michael Irigoyen

---

这太棒了！ 我以前使用了很多绕弯子的方法！ - Sean Lang

Answer 3

在父级div中使用display:table可以使其即使内容是浮动元素也能扩展。它基本上让div表现得像一个表格。

看一下显示属性： http://www.w3.org/wiki/CSS/Properties/display

- Jorge

Answer 4

display: unset;或display: inline;可以在父元素上起作用。

- Adebiyi Adedotun

Answer 5

通常我会创建一个固定的类：

.clearfix{clear:both;}

那么，当你需要的时候，你总是可以使用它。

<div class='wrapperContainer'>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
    <div class="classFloated">
         Content
    </div>
    <div class="clearfix"></div>
</div>

- thelimarenan

Answer 6

将 display:flex 添加到父 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;

}

请查看https://codepen.io/anon/pen/zXwRza

- JohnG