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

Answer 2

The magic clearfix

使外部容器看起来“封闭”嵌套浮动的标准方法是在容器中放置一个完整的“已清除”元素，其效果是“拖动”包含的下边缘框低于浮动。

因此浮子似乎被封闭在容器内，即使它实际上没有。清除框的代码通常如下所示：

<div> <!-- float container -->

  <div style="float:left; width:30%;"><p>Some content</p></div>

  <p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

Answer 3

我添加了clear并确保每个内容div都有margin和padding归零

http://jsfiddle.net/c4KLc/3/

.page .right-content, .page .left-content, .page .middle-content 
{
    border: none;
    padding: 0; 
    margin: 0;
}

.clear { 
    clear: both; 
    line-height: 0;
}

如果您的任何浮动div具有padding，border或margin个样式，则浮动宽度将会关闭，因为您正在执行％width }

Answer 4

将您的HTML更改为

<div class="page">
    <div class="left-content">...content...</div>
    <div class="middle-content">...content...</div> 
    <div class="right-content">...content...</div>
    <div style="clear: both;"></div>
</div>

嵌套div与float

4 个答案: