html - 当元素是带有背景图像的 div 时在图像之间填充

Question

我有一堆带有这样背景图片的 div:

<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>

...等等(有 20 多个 div)。

每个 div 都有自己的背景图片。

现在，在大屏幕上我想每行显示 3 个 div，所以我得到了这个:

@media screen and (min-width:768px) {
  div {
    width:33%;
  }   
}

我想要的是每个 div 之间 2ch 宽的“装订线”。当我使用 padding:2ch; 它不起作用(div 之间没有空格)并且当我使用 margin:2ch; 然后第三个 div 向下到下一行(即使使用 box-sizing:border-box)。

最简单的解决方案是什么？这是我希望 div 看起来像的示例(请参阅每个类图像:http://www.platinumfitnessaz.com/classes/)。

提前致谢。

Answer 1

与注释相反，百分比与 ch 单位无关。只是您没有足够的空间来连续放置东西。

如果您的页面是 100% 宽度，那么 33% 宽度的连续 3 个 div 当然不会留下任何边距空间。 box-sizing 只影响填充和边框，不影响边距，所以这对你没有帮助。

解决方案是使用 calc() 函数。

如果您想要在 div 周围留出 2ch 空间，请使用 2ch 作为 margin。然后，如果您希望每行三个，则可以使用 calc(33% - 2ch) 获取每个宽度。

我们只需要右边距和底部边距就可以达到您想要的效果:

div {
  width: calc(33.333% - 2ch);
  height: 150px;
  float: left;
  margin-bottom: 2ch;
  margin-right: 2ch;
  background-color: firebrick;
}

<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>

这是简单的版本。但是，它并没有完全最大化我们的空间，因为在 div 的第三列右侧有一个 2ch 边距可以重新分配给 div 本身。

为了充分利用所有空间，我们可以做一些数学运算让我们的计算表达式更漂亮一些，然后使用 nth-child 只将右边距应用到 div第一列和第二列:

div {
  width: calc(calc(calc(calc(33.333% - 2ch) * 2) + 33.333%) / 3);
  height: 150px;
  float: left;
  margin-bottom: 2ch;
  background-color: firebrick;
}
div:nth-child(3n+1),
div:nth-child(3n+2) {
  margin-right: 2ch;
}

<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>
<div>
  <h1>Text</h1>
</div>