6

Zurb Foundation フレームワークを使用してフロントエンド (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;
}
4

3 に答える 3

0

親にパディングを使用してラッパーを作成できます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>

ここにフィドルがあります： https://jsfiddle.net/mantisse_fr/40cgg84u/

于 2016-05-07T07:44:17.560 に答える