我有一个经典的问题,我的外面的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/(阅读《大崩溃》)

10-05 20:25
查看更多