我试图模仿twitter的bootstrap css框架使用的行列机制.
我有一个div包含一些其他div本身包含来内容.在我的元素检查器中,它将容器显示为没有高度. div的高度不应该是它包含的元素的高度吗？
<div class="container">
<div class="row yellow">
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
</div>
</div>
这是一个jsfiddle：
解决方法
高度或容器为0的原因是因为您将其中的所有内容浮动并且浮动元素不会扩展其父项的高度(或宽度).
当你将所有元素排成行时,它的高度为0,因此具有.container.
为防止这种情况,您可以：
>设置溢出：隐藏;在容器demo上
>用容器末端的块状元件清除浮子,并清除：两者; demo
您也可以查看此问题以供参考：How do you keep parents of floated elements from collapsing?
