css - 从 box-sizing 中移除 padding 会增加 div 的宽度

Question

我在网格中使用 box-sizing content-box，右边填充为 15px。当我对最后一个 div 应用 0 的填充时，最后一个 div 的宽度增加了 15px，而行中的其他 div 则失去了这 15px 的相等份额。

有什么办法可以解决这个问题吗？

<div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter">
        <h5>One Quarter</h5>
    </div>
    <div class="col one_quarter last">
    <h5>One Quarter</h5>
    </div>
</div>

.col {
    width: 100%;
    float: left;

    border-right: 15px solid transparent;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.one_quarter { 
    width: 25%;
}

.col.last{
border-right-width: 0;
}

Answer 1

当您制作网格时，您必须考虑填充，否则您会得到一些愚蠢的结果。

类也需要重新分配。 (.col 和 .one_quarter 在相同的元素上。所以你的 100% 宽度和 25% 宽度互相覆盖)

Here's an Example Fiddle of what I did.

考虑到这一点，我更新了您的 HTML 和 CSS:

HTML:

<div class="col">
    <div class="one_quarter marginRight">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginCenter">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginCenter">
        <h5>One Quarter</h5>
    </div>
    <div class="one_quarter marginLeft">
    <h5>One Quarter</h5>
    </div>
</div>

CSS:

.col {
    width: 100%;
}

.one_quarter { 
    width: 23%;
    float: left;
    border:1px dotted red;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.col.last{
border-right-width: 0;
}

.marginCenter{margin-right:1%;margin-left:1%;}
.marginLeft{margin-left:2%;}
.marginRight{margin-right:2%;}