2

我正在基础中构建一个简单的站点，我认为它会更快，因为它有很棒的网格。问题是当我将图像放在网格上时，它们之间的间距太远了。我想减少间距，所以图像基本上是 15px 左右。我试图改变填充和边距，但它会抛出整个网格。有没有一种简单的方法可以在 Foundation 中实现这一点，还是我最好从头开始写这个？我的 HTML 如下。

<div class="row">
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. ">
</div>
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham.">
</div>
  <div class="gallery small-4 large-4 columns">
      <img src="assets/img/darkChocolate.png" alt="Painting by Bellingham.">
  </div>

4

2 回答 2

2

_settings.scss 中有一个$column- gutter变量。这控制了网格间距。默认设置为$column-gutter: emCalc(30px); . 尝试更改此值。如果您使用的是 sass 版本，这只会对您有所帮助。

于 2013-08-23T10:36:03.947 回答
2

您可以通过将该类添加到包含图像的行来折叠网格以删除间距。然后，您可以为图像添加填充或边距，以提供所需的 15 像素间距。

<div class="row collapse">
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
</div>
于 2013-08-23T03:11:11.830 回答