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 margin属性，而是使用fly modificator上的行/网格，但我的所有尝试都不成功。

我希望它看起来像这样：

[ 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在行之间保证金

2 个答案: