Question

我在另一个DIV（.block）中有4个div（每个25％宽度）。问题是我需要一个1px的空间来分隔每个DIV，所以我找到的解决方案是向DIV 2,3和4添加1px的左边距所以现在我有25％* 4 + 3px这意味着最后的DIV属于其他DIV。还有另一种方法可以做我想要实现的目标吗？感谢

http://jsfiddle.net/ymE8R/

enter image description here

<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;

<强> Live demo here (click).

Answer 2

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

Answer 3

如果您希望使用box-sizing calc使用http://caniuse.com/calc检查{{3}}，如果您想使用percent

解决方案是px或@ m59的黑客攻击}

Answer 4

试试这个：

在CSS中使用以下代码

.block div:last-child{
    width:24.3%;
}

希望这有帮助！

Answer 5

   <!DOCTYPE html>
<html>

    <head>
       <style>
        .block {
        background: red;
        width:100%;
        Height: 200px;
        }
        * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        }
        .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,.c2,.c3,.c4 {/*use class selector grouping*/
        background: #253151;
        }
        .c2,.c3,.c4 {/*use class selector grouping*/
        border-left: 1px #FFF solid;
        }
       </style>
    </head>

    <body>
    <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>
    </body>

</html>

enter image description here

问题是在4个DIV之间增加1个像素空间l

5 个答案: