Заполнение содержимого внутри сетки
-
27-10-2019 - |
Вопрос
Я использую фонд 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;
}
Решение
Да, это всегда было проблемой с системами сетки и не-плодовых конструкций. Не для того, чтобы издеваться над ними, они определенно имеют свои преимущества против плавных конструкций, но с ними неловко работать.
Что я сделаю, так это установить маржу на элементе внутри элемента, на котором вы хотите набиться. Если это имеет смысл.
<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>
Вот скрипка:https://jsfiddle.net/mantisse_fr/40cgg84u/