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

小编典典

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

css

我想要div黑色的外部包装包裹它div的浮动。我不想使用style='height: 200px中div与outerdivID，因为我希望它自动将其内容的高度（例如，浮动div或多个）。

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

如何实现呢？

阅读 309

2020-05-16

共1个答案

小编典典

您可以将outerdiv的CSS设置为此

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

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

问题在于容器不会自然地扩展为包括浮动儿童。使用第一个示例警告您，如果在父元素之外还有子元素，则它们将被隐藏。您也可以使用’auto’作为属性值，但是如果任何元素出现在外部，这将调用滚动条。

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

2020-05-16