1

HTML/CSS コーディングは初めてですが、これまで Foundation フロントエンドでの作業が好きでした。小さな問題があります: 行内の列要素間のパディングを変更するにはどうすればよいですか?

問題のページは次の場所にあります。

www.myfootprintcalculator.com

行の 1 つのコードは次のとおりです。

<!--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-foundationSass/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前と同じように for each tileを使用して、4 つのタイルを並べて取得します。このem-calcピースは、ページの基本フォント サイズに基づいて、指定されたピクセル値から ems 単位でサイズを計算する単なるヘルパーです。これにより、デバイス間で相対的なサイズを維持できます。

グリッドのドキュメント ページで詳細が説明されています: http://foundation.zurb.com/docs/components/grid.html

上記の例では、画像は背景よりも内容が多いため、imgおそらくタグが適切であることをお勧めします。オプションについて詳しく説明している独断的な記事は次のとおりです。

于 2013-11-16T20:19:10.760 に答える