Поля между рядами с Скел

Я использую систему сетки Skel для настройки своего макета, но я не понимаю, как добавить пространство между строками.

Вот как выглядит мой HTML-код:

<style> .element{ border: 1px solid black; } </style>
<!--[...]!-->
<div class="row">
    <div class="element 4u 12u(small)"> ROW_1 </div>
    <div class="element 4u 12u(small)"> ROW_2 </div>
    <div class="element 4u 12u(small)"> ROW_3 </div>
</div>

Как и ожидалось, мой контент отображается в одну строку:

[  ROW_1  ][  ROW_2  ][  ROW_3  ]

Проблема в том, что последняя строка переходит на новую строку, если я добавляю поле в класс.element css.

<style> .element{ border: 1px solid black; margin: 1em; } </style>

Маржа добавляется, но она нарушает систему сетки, что приводит к:

[ ROW_1 ]   [ ROW_2 ]   
[ ROW_3 ]

Я думаю, что я не должен использовать свойства css margin, а вместо этого использовать строку / сетку на модификаторе fly, но все мои попытки не увенчались успехом.

Я хочу, чтобы это выглядело так:

[ ROW_1 ]   [ ROW_2 ]   [ ROW_3 ]

Я использую базовую линию в качестве шаблона, и не изменил какие-либо параметры Skel.

Источник

2 ответа

Решение

Я нашел свое решение.

Код:

<style> .element{ border: 1px solid black; margin: 1em;} </style>
<!--[...]!-->
<div class="row">
    <div class="4u 12u(small)"><div class="element"> ROW_1 </div></div>
    <div class="4u 12u(small)"><div class="element"> ROW_2 </div></div>
    <div class="4u 12u(small)"><div class="element"> ROW_3 </div></div>
</div>

Объяснение:

Я настраивал поле в ряду Скеля, нарушая его расположение. Решение состоит в том, чтобы добавить новый контейнер div вокруг содержимого со всеми необходимыми полями и css, чтобы компоновка Skel не изменялась, поскольку поле всегда относительно его родительского элемента. Надеюсь, это поможет!

Источник

Обновите свой CSS как:

.element{ border: 1px solid black; float:left; width:32.9%;}

Ширина вы можете контролировать столько, сколько хотите.

Источник
Другие вопросы по тегам