Question

我有一堆像这样的背景图像的div：

SELECT user, Select_priv, Insert_priv , Update_priv, Delete_priv, 
       Create_priv, Drop_priv, Shutdown_priv, Create_user_priv 
FROM mysql.user;

......等等（有20多个div）。

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

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

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

我想要的是一个＆＃39;排水沟＆＃39;每个div之间的宽度为2ch。当我使用@media screen and (min-width:768px) { div { width:33%; } }时它不起作用（div之间没有空格），当我使用padding:2ch;时，第3个div会下降到下一行（即使使用margin:2ch;）。

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

提前致谢。

Answer 1

与评论相反，百分比与ch单位无关。事实上，你没有足够的空间来连续安装。

如果您的网页宽度为100%，那么33%宽的行中的3个div当然不会留下余地。 box-sizing仅影响填充和边框，而不影响边距，因此对您无效。

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

如果您希望在div周围留出2ch空格，请使用2ch作为边距。然后，如果你想要每行三个，你可以使用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本身。

为了充分利用所有空间，我们可以做一些数学运算来使我们的calc表达式更加漂亮，然后使用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>

当项目是具有背景图像的div时，在图像之间填充

1 个答案: