html - 在 4 个 DIV 之间添加 1px 空间的问题 l

Question

我在另一个 DIV (.block) 中有 4 个 div(每个宽度为 25%)。问题是我想要一个 1px 的空间来分隔每个 DIV，所以我找到的解决方案是将 1px 的 margin-left 添加到 DIV 2、3 和 4。所以现在我有 25% * 4 + 3px 这意味着最后一个 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

设置宽度:25%； border-left:1px solid #fff; 然后加上这个

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

Live demo here (click).