Заполнение содержимого внутри макета столбца сетки

Я использую структуру 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
person David Yell    schedule 01.12.2011    source источник
comment
Вы хотите изменить отступы, не добавляя CSS? Я не понимаю, я думаю.   -  person PeeHaa    schedule 01.12.2011

Ответы (3)


arrow_upward
4
arrow_downward

Да, это всегда было проблемой с грид-системами и негибкими проектами. Не хочу насмехаться над ними, у них определенно есть свои преимущества по сравнению с плавающими конструкциями, но с ними неудобно работать.

Что бы я сделал, так это установить поле для элемента внутри элемента, который вы хотите заполнить. Если это имеет смысл.

<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>

OR

<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>
person Sean H Jenkins    schedule 01.12.2011

arrow_upward
1
arrow_downward

почему бы не добавить отступы или поля к дочерним элементам? что-то типа

.columns * {margin:0px 10px}
person ptriek    schedule 01.12.2011

arrow_upward
0
arrow_downward

Вы можете создать оболочку с отступом для родительского элемента 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/

person Mantisse    schedule 07.05.2016