質問
Zurb Foundation Frameworkを使用してフロントエンド(http://foundation.zurb.com/docs/grid.php)を構築しています。基本的なレイアウトを問題なく作成しました。
私が疑問に思っているのは、列内にコンテンツをパッドする方法ですか?すべてのコンテンツは予想どおり左側に整列されていますが、グリッドレイアウトマークアップをカスタマイズするか、どこにでもたくさんのラッパーを作成せずにパディングを作成する方法がわかりません。
たとえば、マークアップ
<div class="container">
<div class="row">
<div class="eight columns customise-the-grid">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
<div class="four columns">
<div class="or-create-a-wrapper">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
</div>
</div>
説明するいくつかのCSS
.customise-the-grid{
padding: 10px;
}
.or-create-a-wrapper{
padding: 10px;
}
解決
はい、これは常にグリッドシステムと非流体設計の問題でした。しかし、それらをock笑しないように、彼らは間違いなく流体設計に対して彼らの利点を持っていますが、彼らは一緒に働くのが厄介です。
私がしていることは、パディングをしたい要素の内側の要素にマージンを設定することです。それが理にかなっている場合。
<div class="four columns">
<div class="or-create-a-wrapper"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
また
<div class="four columns">
<div class="or-create-a-wrapper">
<div class="another-div-yay"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
</div>
<!-- other various content -->
</div>
</div>
他のヒント
子供の要素にパディングやマージンを追加してみませんか?何かのようなもの
.columns * {margin:0px 10px}
親にパディングでラッパーを作成できます column
.
<div class="container">
<div class="row">
<div class="eight columns customise-the-grid">
<div class="small-12 content-wrapper column">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
<div class="four columns or-create-a-wrapper">
<div class="small-12 content-wrapper column">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
</div>
</div>
<style>
.customise-the-grid{
padding: 10px;
}
.or-create-a-wrapper{
padding: 10px;
}
.content-wrapper{
background-color:lightgray;
border-radius: 10px;
}
</style>
所属していません StackOverflow