我有一个经典的问题,我的外面的div没有高度,因为它的所有子项都漂浮了。我想知道是否有一个简单的解决方案(没有Java脚本),以便我可以保留浮动子代的行为,同时使外部div具有高度(以便内部div周围有边框)。
这是一个概述问题的小提琴:http://jsfiddle.net/2fn73ck1/
的CSS
#outer-div
{
border: 1px solid red;
}
div.inner
{
float: left;
width: 30%;
border: 1px solid blue;
}
的HTML
<div id="outer-div">
<div class="inner">
<p>Here's some content</p>
</div>
<div class="inner">
<p>Here's some more content</p>
</div>
<div class="inner">
<p>Here's even more content</p>
</div>
</div>
最佳答案
或者您可以简单地:
#outer-div {
display: inline-block;
}
演示:http://jsfiddle.net/xp10xdq0/1/
要么
#outer-div {
overflow: auto;
}
演示:http://jsfiddle.net/xp10xdq0/
您有经典的父代折叠问题,您可以在此处进一步阅读:
http://css-tricks.com/all-about-floats/(阅读《大崩溃》)