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

Question

我想要外面的div,它是黑色的包裹它div漂浮在其中.我不想在id中使用style='height: 200px,因为我希望它自动成为其内容的高度(例如,浮动s).divouterdivdiv

<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

您可以将outerdivCSS设置为此

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

您也可以通过在末尾添加元素来完成此操作clear: both.这可以通过JS(不是一个好的解决方案)或:afterCSS伪元素(旧IE中没有广泛支持)正常添加.

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

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

Answer 2

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

使用Alex的答案(&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在这种情况下有帮助。

真的很干净。