css - 如何设置父 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的最大高度？在这种情况下：200px

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>​