行与 Skel 之间的边距

Question

我正在使用 Skel 网格系统来设置布局，但我不明白如何在行之间添加 space。

我的 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 class.

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

添加了边距，但它破坏了网格系统，导致：

[ ROW_1 ]   [ ROW_2 ]   
[ ROW_3 ]

我认为我不应该使用 css 边距属性，而是使用 row/grid 即时修改器，但我所有的尝试都没有成功。

我希望它看起来像这样：

[ ROW_1 ]   [ ROW_2 ]   [ ROW_3 ]

我使用 baseline 作为样板文件，没有修改任何 Skel 选项。

Answer 1

更新你的CSS喜欢：

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

宽度随心所欲

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

解释：

我在 Skel 行上设置了边距，从而破坏了他的布局。解决方案是在内容周围添加一个新容器 div，具有所有需要的边距和 css，这样 Skel 布局就不会改变，因为边距总是相对于他的父元素。希望对您有所帮助！

行与 Skel 之间的边距

Margin between rows with Skel

html

javascript

baseline

skel