将百分比宽度与边距(以像素为单位)组合在一起

Question

我有一个包含多个项目的页面,其宽度为33.33%,以填充页面的整个宽度.但是,我想在项目之间添加20px的边距(垂直和水平,但垂直是这里的问题),但只是在连续的每个第1和第2项的右边添加20px边距,销毁整个页面.(从小提琴中删除已注释掉的CSS,看看我的意思).

的jsfiddle

现在,问题是:如何添加20px的保证金并确保所有.itemdiv保持相同的大小？我可以使用宽度的百分比并添加移除的宽度.item作为边距,但这绝不会是稳定的20px,因为它是百分比.

HTML

<div id="main">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
</div>

CSS

#main .item {
    height: 100px;
    width:33.33%;
    float:left;
    text-align: center;
}
#main .item:nth-child(3n+1) {
    background: red;
}
#main .item:nth-child(3n+3) {
    background: yellow;
}
#main .item:nth-child(3n+2) {
    background:lightblue;
}
/*.item:nth-child(3n+1), .item:nth-child(3n+2) {
    margin-right: 20px !important;
}*/

Answer 1

你可以使用calc()减去20px从33.33%.

在这种情况下,您将使用width: calc(33.33% - 20px)替换边距.

更新的示例

#main .item:nth-child(3n+1),
#main .item:nth-child(3n+2) {
    width: calc(33.33% - 20px);
    margin-right: 20px;
}

不幸的是,这将导致宽度不同的元素(因为20px没有从所有元素中减去).更好的解决方案是13.33px从所有元素中减去(40px/ 3px):

更新的示例

#main .item {
    height: 100px;
    width: calc(33.33% - 13.33px);
    float:left;
    text-align: center;
}