首页 文章

在网格列布局内填充内容

提问于
浏览 次
5

我正在使用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;
}
css zurb-foundation

3 回答

  • 3

    是的，这一直是网格系统和非流体设计的问题 . 不过要嘲笑他们，他们肯定会对流体设计有优势，但是他们很难处理 .

    我要做的是在你希望填充的元素内的元素上设置一个边距 . 如果这是有道理的 .

    <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>
    回复于
  • 0

    为什么不在子元素中添加填充或边距？就像是

    .columns * {margin:0px 10px}
    回复于
  • 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/

    回复于

相关问题