使外部div与其浮动内容自动具有相同的高度 [英] Make outer div be automatically the same height as its floating content

问题描述

我想要外部 div ，它是黑色的，包装它的 div 浮动。我不想在 div 中使用 outerdiv 使用 style ='height：200px / code> id，因为我想让它自动的是其内容的高度（例如，浮动 div s）。

I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating 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>

如何实现？ / p>

How to achieve this?

推荐答案

您可以将 outerdiv 的CSS设置为

You can set the outerdiv's CSS to this

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

通过在 clear：both 的末尾添加一个元素来做到这一点。这可以正常添加JS（不是一个好的解决方案）或：之后 CSS伪元素（在旧IE不广泛支持）。

You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).

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

The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.

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

You can also try floating the parent container, but depending on your design, this may be impossible/difficult.

这篇关于使外部div与其浮动内容自动具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！