Question

我正在使用右侧15px填充的网格中的box-sizing内容框。当我向最后一个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%;}

Answer 2

我强烈建议不要填充网格元素。这可能会导致严重的头痛问题。

添加另一个div并在网格单元格中应用填充，如下所示：

<div class="grid">
   <div class="grid-cell">
      <div class="grid-content">
      </div>
   </div>
</div>

.grid-content {
 padding: 15px;
}

让网格单元格进行宽度测量，网格内容进行填充。

从box-sizing中删除填充会增加div的宽度

2 个答案: