Html 使外部 div 自动与其浮动内容高度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/804926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make outer div be automatically the same height as its floating content
提问by Jase Whatson
I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200pxin the divwith the outerdivid as I want it to be automatically the height of its content (eg, the floating divs).
我想要div黑色的外部divs包裹它漂浮在里面。我不想在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>
How to achieve this?
如何实现这一目标？
回答by alex
You can set the outerdiv's CSS to this
您可以将outerdiv的 CSS 设置为此
#outerdiv {
overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}
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 :afterCSS pseudo element (not widely supported in older IEs).
您也可以通过在末尾添加一个元素来做到这一点clear: both。这可以正常添加，使用 JS（不是一个好的解决方案）或使用:afterCSS 伪元素（在较旧的 IE 中没有广泛支持）。
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.
问题是容器不会自然地扩展到包括浮动的孩子。请注意使用第一个示例，如果您在父元素之外有任何子元素，它们将被隐藏。您也可以使用 'auto' 作为属性值，但如果任何元素出现在外面，这将调用滚动条。
You can also try floating the parent container, but depending on your design, this may be impossible/difficult.
您也可以尝试浮动父容器，但根据您的设计，这可能是不可能/困难的。
回答by Lycana
Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.
首先，我强烈建议您在外部 CSS 文件中进行 CSS 样式设置，而不是内联。使用类更容易维护并且可以更重用。
Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:
解决 Alex 的回答（和 Garret 的 clearfix）“在最后添加一个元素 clear: both”，你可以这样做：
<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>
This works (but as you can see inline CSS isn't so pretty).
这是有效的（但正如你所看到的，内联 CSS 并不是那么漂亮）。
回答by DarkWulf
You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/
您可能想尝试自闭浮点数，详见http://www.sitepoint.com/simple-clearing-of-floats/
So perhaps try either overflow: auto(usually works), or overflow: hidden, as alex said.
所以也许尝试overflow: auto（通常有效），或者overflow: hidden，正如亚历克斯所说。
回答by Nande
I know some people will hate me, but I've found display:table-cellto help in this cases.
我知道有些人会讨厌我，但我发现display:table-cell在这种情况下可以提供帮助。
It is really cleaner.
它真的更干净。
回答by Garrett
First of all you don't use width=300pxthat's an attribute setting for the tag not CSS, use width: 300px;instead.
首先，您不使用width=300px该标签的属性设置，而不是 CSS，width: 300px;而是使用。
I would suggest applying the clearfixtechnique on the #outerdiv. Clearfixis a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.
我建议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>
Here is an exampleof your situation and what Clearfix does to resolve it.
以下是您的情况以及 Clearfix 为解决该问题所做的示例。
回答by Harpal
Use jQuery:
使用jQuery：
Set Parent Height = Child offsetHeight.
设置父高度 = 子偏移高度。
$(document).ready(function() {
$(parent).css("height", $(child).attr("offsetHeight"));
}
回答by Ronan
Use clear: both;
用 clear: both;
I spent over a week trying to figure this out!
我花了一个多星期试图解决这个问题！
