Question

HTML / CSS编码新手，但是到目前为止，我还是喜欢使用基金会前端。有一个小问题：如何更改行中列元素之间的填充？

有问题的页面可在以下网址找到：

www.myfootprintcalculator.com

其中一行的代码是：

<!--fourthrow><!-->

<div class="row">

<div class="large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

有人可以指出在列之间进行填充的直接方法瓷砖与行之间的填充相同？ Foundation的CSS文件非常庞大，对于新手来说有点吓人。

Answer 1

删除列之间的填充/装订线的最简单方法是使用行上的collapse类。如果您想要更多控制权，请继续阅读......

如果您使用Sass / Compass，zurb-foundation gem或自定义下载，还有其他几个选项。例如，如果您希望在整个应用中更改列间距，则只需设置$column-gutter变量即可。对于像这样具有固定间距的一组元素，您可能还需要考虑块网格。

如果您想将自定义装订线仅应用于某些行，则可以定义一个新类，对行说.feature-tiles并自定义列。例如：

@import 'foundation';

.feature-tiles {
  $row-width: em-calc(800);
  @include grid-row;

  .columns, .column {
    $column-gutter: 0;
    @include grid-column;
  }
}

此示例设置一个可用于行的类（而不是row），设置总行宽，并删除列之间的装订线，适用于贴合的平铺布局。您可以对每个图块使用large-3 columns，与之前相同，以获得该行中的四个图块。 em-calc只是一个帮助程序，它根据页面的基本字体大小，根据提供的像素值计算ems的大小。这有助于维护设备间的相对大小。

网格的文档页面解释了更多：http://foundation.zurb.com/docs/components/grid.html

在上面的示例中，我建议图片的内容比背景更多，因此img标签可能是合适的。这是一篇自以为是的文章，它解释了更多选项：http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Answer 2

另请注意，您仍然可以在CSS中使用背景图像，并且无需担心默认的Zurb CSS文件。

只需创建一个CSS文件并将其保存到CSS文件夹中，并将其命名为app.css并保存。现在，如果您制定任何自己的规则，可以将它们保存在此处。

例如，您可以制定规则＆＃34; main-box＆＃34;使用数值，并将其保存到您的CSS文件。然后您可以应用背景图像。所以HTML看起来像这样：

<div class="row">

<div class="main-box large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="main-box2 large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="main-box3 large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="main-box4 large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

然后简单地在app.css中给它一个带有背景图像的CSS规则，如下所示：

.main-box,.main-box2,.main-box3,.main-box4 {background-image: url(path to your image file here);}

或者，如果您需要单独的背景图像，请将您的规则分开：

.main-box{background-image:url();}
.main-box2{}
.main-box3{}
.main-box4{}

依旧......

我应该注意到这只是一种方法。在响应式设计中，有时候在html中输入图像真的很有用。使用背景图像只是覆盖默认容器填充的一种方法。

另一个注意事项......如果你从Zurbs CSS文件输入一个默认的CSS规则到app.css;然后它将被覆盖。因此，您可以更改默认的CSS值，而不会弄乱原始文件。

Zurb Foundation：更改列之间的填充

2 个答案: