嵌套div与float

Question

我试图在外部div中嵌套三个div.问题是嵌套的div不会使外部的增长.

CSS如下:

.page {display: block;  width: 96%;}
.page .left-content {display: inline-block; float:left; width: 15%;}
.page .middle-content {display: inline-block; float:left; width: 70%;}
.page .right-content {display: inline-block; float:left; width: 15%;}

我想要的HTML:

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
</div>

为页面类提供背景颜色表明页面类div的大小不正确.我该如何解决这个问题？

Answer 1

包装器必须清除内容DIV.

.page {
    overflow: hidden;
    *zoom: 1; /* for ie6/7 */
}

不需要额外的标记.另请参阅Aslett的清算方法:http://www.positioniseverything.net/easyclearing.html