如何将父 div 高度设置为自我适应内部 div 高度

Question

我有一个父div 和 2 个子div，如下所示：

<div class="parent">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​

如何设置"父"css 以适应内部div 的最大高度？在本例中：200 像素

PS：height=100%和height=auto都不起作用。

谢谢。

Answer 1

父div 不采用其内容的高度，因为内部div 是浮动的。在关闭父div 之前，您必须清除浮动。试试这个：

<div class="parent">
    <div style="height:100px; float:left;" >
        aaa
    </div> 
    <div style="height:200px; float:left;">
        bbb
    </div>
    <div style="clear:both"></div>
</div>​

---

编辑：您可能想看看这篇w3c文章，以获取有关浮点数和清除的深入信息：http://www.w3.org/wiki/Floats_and_clearing

Answer 2

你也可以

在父元素上"overflow：hidden"，尽管如果你想让事情脱离那个div，你可能会遇到问题（例如负边距，框阴影等）。

<div class="parent" style="overflow: hidden;">
    <div style="height:100px; float:left;" >
        aaa
    </div>
    <div style="height:200px; float:left;">
        bbb
    </div>
</div>​

Answer 3

我点击了 peterp 提供的链接，并想引用他们提到的一种方法，该方法对我有用。此方法在他们的列表中排在第一位，并被描述为简单的:)

使外div也float

<div class="parent" style="float:left;">

Answer 4

你需要添加 style="clear：both"

<div class="parent">
       <div style="height:100px; float:left;" >
           asljkdh        
       </div> 
       <div style="height:200px; float:left;">
          bbb 
       </div>
       <div style="clear:both"></div> <!-- Add this Line-->
     </div>​