Question

我要做的是让容器内的盒子自动适应容器宽度。

.container{
width: 960px;
}

.box{
width: 240px; /* 960/4 = 240 */
float: left;
border:1px solid #000;
}

还有另一种方法可以做到这一点而不是分割容器的宽度吗？

Answer 1

没有没有捷径。

唯一的方法就是使用百分比或者像现在这样分割div。并且浮动div以便它们可以堆叠在一行上。

Answer 2

这个怎么样？ http://jsfiddle.net/643FQ/

.container{
width: 960px;
}

.box{
width: 25%;
height: 50px;
float: left;
border:1px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 3

您可以在此处使用百分比：

.box {
    width: 25%;
}

请注意，由于您使用1px作为边框，因此每个框都会有2px个额外内容，因此您的最后一个框不会与其他三个框叠加在一行，因为您的.container是960px。

您可以删除边框或减小.box宽度的值，也可以增加.container

的宽度

使盒子适合容器宽度

3 个答案: