使用浮动的嵌套div [英] Nested divs with float

问题描述

我想在外部div中嵌入三个div。

I am trying to nest three divs within an outer div. problem is the nested divs are not making the outer one grow.

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不是正确的大小。我如何解决这个问题？

giving a background color to the page class shows that the page class div is not of the correct size. How do i solve this?

推荐答案

包装器必须清除内容DIV。

The wrapper must clear the content DIVs.

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

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

No extra markup is needed. Also have a look at Aslett's clearing method: http://www.positioniseverything.net/easyclearing.html

这篇关于使用浮动的嵌套div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！