css - 使外部 div 自动与其浮动内容高度相同

Question

我想要黑色的外部div，将其divs 包裹在其中浮动。我不想在 id 中使用style='height: 200px，div因为outerdiv我希望它自动成为其内容的高度（例如，浮动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>

如何做到这一点？

Answer 1

您可以将outerdiv's CSS 设置为此

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

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

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

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

Answer 2

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

解决亚历克斯的“在末尾添加一个带有 clear: both 的元素”的答案（和 Garret 的 clearfix），你可以这样做：

    <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 不是那么漂亮）。

Answer 3

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

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

Answer 4

我知道有些人会恨我，但我发现display:table-cell在这种情况下可以提供帮助。

它真的更干净。

Answer 5

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

我建议clearfix在#outerdiv. 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>

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

Answer 6

使用 jQuery：

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

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

Answer 7

采用clear: both;

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