Question

这里有一个演示＆gt; http://jsfiddle.net/AndyMP/4hzXe/

我无法弄清楚为什么容器DIV没有扩展。

CSS

#container { 
position: relative;
width: 400px;
border: solid 1px #333;
padding: 20px;
}
#left { 
position: relative;
float: left;
width: 100px;
height: 100px;
border: 1px solid blue;
margin: 10px;
overflow: hidden;
}

HTML

<div id="container">

<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>
<div id="left"></div>

</div>

Answer 1

你需要清除浮子。 http://jsfiddle.net/4hzXe/2/

添加了行overflow: hidden;，您可以使用clearfix。我大多数时候都使用clearfix解决方案

#container { /* Preview content box */
    position: relative;
    width: 400px;
    border: solid 1px #333;
    padding: 20px;
    overflow: hidden;
}

我还将id="left"更改为class="left"，ID只应在页面上显示一次。

Answer 2

您需要一种技术来包含您的花车。至少有两种可能性：

Containing floats with floats
Enclose floats with clear

哪种方法最适合您？（我的推荐）

如果您有一个可以承担清算工作的元素（例如hr），请使用它。
如果可以设置父级的宽度，请将float属性与宽度一起使用（就是你的情况）。
使用Easyclearing否则
在直截了当的情况下使用overflow属性

Answer 3

试试这个

.left { 
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    margin: 10px;
    overflow: hidden;
}

<div id="left"></div>已更改为<div class="left"></div>

演示：http://jsfiddle.net/4hzXe/6/

无法扩展容器DIV

3 个答案: