0

Foundation3コードで実行されるReverieをベースにしたWordpressテーマのデザインを始めています。以前にテーマを作成しましたが、グリッド方式、特にガターを実現するための最善の方法に頭を悩ませようとしています。

問題：

ここで私のテストサイトを参照してくださいhttp://diskbacker.com/

問題を示すために、背景色のコンテンツdivとサイドバーdivがあります。それらはデフォルトで互いに接触します。

  1. コンテンツdivとサイドバーdivの間に分離を追加するにはどうすればよいですか？

  2. コンテンツとサイドバーに内側のパディングを追加するにはどうすればよいですか？

  3. 「レスポンシブ」に移行するときに、この分離によってモバイルデバイスで問題が発生しますか？

前もって感謝します。

4

2 に答える 2

1

列内に別の div を配置すると機能します...

<div class="four columns">
<div style="margin:25px; background: #ccc;">test</div></div>
<div class="eight columns">eight</div>

また、Foundation でクラス .panel を探して、特定のニーズに適応させることもできます。

.panel { background: #f2f2f2; border: solid 1px #e6e6e6; margin: 0 0 22px 0; padding: 20px; } 
.panel > :first-child { margin-top: 0; } 
.panel > :last-child { margin-bottom: 0; }

代わりに - Foundation v2 を使用

于 2013-03-06T14:48:11.060 に答える
0

最初に、グリッドの使用法について説明している ZURB Foundation のドキュメントを読むことをお勧めします。

http://foundation.zurb.com/docs/grid.php

ガターは、列のパディングで簡単に作成されます。つまり、列の幅は 25% や 50% などの単純なものです。パディングを調整すると、ガターが調整されます。これは、Scss 変数、ダウンロード カスタマイザー、または CSS 自体を介して制御できます。

他の HTML/CSS サイトと同様に、変更したい要素のセレクターを識別し、カスタム CSS スタイルシートでその要素のパディングを識別できます。次に例を示します。

.sidebar {padding:14px;}

それが役立つことを願っています。

于 2013-01-23T09:26:49.777 に答える