使外部 div 自动与其浮动内容高度相同答案

【问题标题】：Make outer div be automatically the same height as its floating content使外部 div 自动与其浮动内容高度相同
【发布时间】：2010-10-22 17:45:30
【问题描述】：

我想要外部的div，它是黑色的，可以将它的divs 包裹在其中浮动。我不想在div 中使用style='height: 200px 和outerdiv id，因为我希望它自动成为其内容的高度（例如，浮动的divs）。

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

如何做到这一点？

【问题讨论】：

标签： css html css-float

【解决方案1】：

你可以把outerdiv的CSS设置成这个

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

您也可以通过在末尾添加一个带有clear: both 的元素来做到这一点。这可以正常添加，使用 JS（不是一个好的解决方案）或使用 :after CSS 伪元素（在较旧的 IE 中不广泛支持）。

问题在于容器不会自然地扩展到包含浮动子级。请注意使用第一个示例，如果您在父元素之外有任何子元素，它们将被隐藏。您也可以使用 'auto' 作为属性值，但如果有任何元素出现在外部，这将调用滚动条。

您也可以尝试浮动父容器，但根据您的设计，这可能是不可能/困难的。

【讨论】：

我希望我理解为什么溢出的逻辑：隐藏在这种情况下有效。
是的，我希望不只是我认为这违反直觉。亚历克斯？
@masteroleary @regularmike HTML/CSS 从来都不是好的 UI 技术，所以其中反直觉的东西很常见 :)
@masteroleary 我意识到这是一个旧线程，但我最近尝试在stackoverflow.com/questions/21041297#21041625 回答一个类似的问题——希望它有所帮助
+1 表示float 解决方案。与其他失败一起工作得很好，尤其是与 Twitter Bootstrap 配对时。

【解决方案2】：

您可能想尝试自动关闭浮动，详情请参阅http://www.sitepoint.com/simple-clearing-of-floats/

所以也许尝试overflow: auto（通常有效）或overflow: hidden，正如亚历克斯所说。

【讨论】：

隐藏的工作，但你是对的，自动工作更好一点。谢谢。

【解决方案3】：

首先你不要使用width=300px，这是标签的属性设置而不是CSS，而是使用width: 300px;。

我建议在#outerdiv 上应用clearfix 技术。 Clearfix 是清除 2 个浮动 div 的通用解决方案，因此父 div 将扩展以容纳 2 个浮动 div。

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

这是您的情况的example，以及 Clearfix 为解决该问题所做的工作。

【讨论】：

【解决方案4】：

首先，我强烈建议您在外部 CSS 文件中进行 CSS 样式设置，而不是内联。它更容易维护，并且可以使用类更易于重用。

根据 Alex 的回答（以及 Garret 的 clearfix）“在末尾添加一个带有 clear: both 的元素”，您可以这样做：

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

这行得通（但你可以看到内联 CSS 不是那么漂亮）。

【讨论】：

为什么我的评分被降低了？它有效，我正确地承认这不是一个很好的解决方案。
我不确定，我 +1 会让你至少回到 0。也许你被否决是因为你没有更正他不正确的 CSS……即使用等号设置 CSS 属性是不正确的。
很公平。我很欣赏 +1 亚历克斯。我认为这是我的陈述是公平的。
这个解决方案是更好的 IMO。如果这是我的问题，我会接受这个答案。

【解决方案5】：

使用 jQuery：

设置父高度 = 子偏移高度。

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

【讨论】：

矫枉过正，当你可以单独使用 CSS 时。
根据我的回答，您可以将父高度设置为与子高度相同，但使用溢出我们不会更改父高度，如果我们在父 div 之后显示数据，则会产生一些问题。

【解决方案6】：

使用clear: both;

我花了一个多星期的时间试图弄清楚这一点！

【讨论】：

【解决方案7】：

我知道有些人会恨我，但我找到了 display:table-cell 在这种情况下提供帮助。

真的很干净。

【讨论】：

外层 div 使用 display: table;并在 div 内部使用 display: table-cell;