Question

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

JSfiddle

现在，问题是：如何添加20px的边距并确保所有.item div保持相同的大小？我可以使用宽度的百分比并添加.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)来替换边距。

Updated Example

#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：

Updated Example

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

Answer 2

更改每个.item课程的宽度，并使用calc()

进行计算

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

<强> Fiddle

Answer 3

您可以使用%作为包装，并在使用box-sizing: border-box时将边距更改为填充

＆＃13;

.wrapper {
  /* enable to add padding to width */
  box-sizing: border-box;
  width: 33.33%;
  float: left;
  padding: 20px;
  background-color: #EFEFEF;
}
.item {
  background-color: #ddd;
  padding: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>
<div class="wrapper">
  <div class="item">Some thext here</div>
</div>

＆＃13;

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

3 个答案: