发行以添加1 1px空间btw 4 DIVs

Question

我在另一个DIV (.block)中有4个DIV(每个25%的宽度)。问题是，我想要一个1px空间来分隔每个DIV，所以我找到的解决方案是在DIVs 2、3和4中添加一个1px的边距。所以现在我有25% *4+ 3px，这意味着最后一个DIV在其他DIV下面。还有别的方法来做我想要达到的目标吗？谢谢

http://jsfiddle.net/ymE8R/

​

​

<div class="block">
    <div class="col1 c1">dsqd</div>
    <div class="col2 c2">sdsqdss</div>
    <div class="col3 c3">sdqsdsq</div>
    <div class="col4 c4">sdsqd</div>
</div>

.block {
    background: red;
    width:90%;
    Height: 200px;
}
.col1, .col2, .col3, .col4 {
    float: left;
    width: 25%;
    background: red;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    height: 24px;
    vertical-align: middle;
    display: table-cell;
}
.c1 {
    background: #253151;
}
.c2 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c3 {
    background: #253151;
    border-left: 1px #FFF solid;
}
.c4 {
    background: #253151;
    border-left: 1px #FFF solid;
}

Answer 1

设置width:25%; border-left:1px solid #fff;，然后添加以下内容

-moz-box-sizing: border-box;
box-sizing: border-box;

现场演示(点击)。

Answer 2

一个简单的解决方案是使width: 24.5%和margin-left: .5%

Answer 3

解决方案是box-sizing或@m59的黑客攻击，如果您想要使用percent，如果要在px中使用空白，请使用卡尔克 check http://caniuse.com/calc