与Skel之间的行间距

Question

我正在使用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边距属性，而是在动态修改器上使用行/网格，但是我的所有尝试都没有成功。

我想让它看起来像这样

[ ROW_1 ]   [ ROW_2 ]   [ ROW_3 ]

我使用基线作为样板，没有修改任何Skel选项。

Answer 1

我找到了解决办法。

代码：

<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布局就不会改变，因为边距总是相对于他的父元素。希望能帮上忙！

Answer 2

更新CSS如下：

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

宽度你可以控制你想要的多少。