1

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

有问题的页面可以在以下位置找到：

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 文件非常大，对于新手来说有点吓人。

4

2 回答 2

4

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

zurb-foundation如果您使用的是 Sass/Compass、 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/

于 2013-11-16T20:19:10.760 回答
1

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

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

因此，例如，您可以使用数值创建规则“主框”，并将其保存到您的 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 值，而不会弄乱原始文件。

于 2013-04-02T13:52:01.107 回答