Question

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

<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的CSS设置为此

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

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

问题是容器不会自然膨胀以包括漂浮的儿童。使用第一个示例进行警告，如果父元素之外有任何子元素，它们将被隐藏。您也可以使用'auto'作为属性值，但如果任何元素出现在外面，这将调用滚动条。

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

Answer 2

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

解决亚历克斯的答案（＆amp; 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>

以下是您的情况的example以及Clearfix解决此问题的方法。

Answer 6

使用jQuery：

设置父高度= Child offsetHeight。

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

Answer 7

使用clear: both;

我花了一个多星期试图解决这个问题！

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

7 个答案: