0

我在具有 15px 填充权的网格中使用 box-sizing content-box。当我对最后一个 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;
}
4

2 回答 2

0

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

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

这是我所做的一个示例小提琴。

考虑到这一点，我更新了您的 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%;}
于 2013-11-14T15:57:51.357 回答
0

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

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

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

.grid-content {
 padding: 15px;
}

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

于 2013-11-14T16:05:38.413 回答