CSS宽度没有按预期加起来

Question

我的网页上有一行100px和4列25px。我似乎得到了奇怪的行为。请看一下这个小提琴http://jsfiddle.net/GmU2k/

我的问题是，所有列都应该在同一行吗？

Answer 1

Fiddle

通过在box-sizing: border-box上添加以下css更好地使用column-3：这是因为您的1px边框。

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */

Answer 2

将第3列宽度更改为24％。

Answer 3

检查此fiddel

http://jsfiddle.net/GmU2k/2/

.column-3 {
    width: 24%;
    border: 1px solid red;
    float: left;
}

您将宽度设为25％，边框为1px。所以4 divs width = 100% + border width 这就是为什么一行中没有显示4个div的原因。因为没有足够的空间。

一旦减小了内部div的宽度，就会有足够的空间。或者你可以删除边框，这样内部div就有足够的空间显示在一行中。

注意：简单的概念是应该有足够的空间让div以单行显示。如果没有足够的空间，那么它们将流向下一行。