0

我正在使用 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 选项。

4

2 回答 2

0

像这样更新你的 CSS：

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

您可以根据需要控制宽度。

于 2017-01-19T16:31:09.597 回答
0

我找到了我的解决方案。

编码：

<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 布局不会改变，因为边距始终相对于其父元素。希望它会有所帮助！

于 2017-01-19T17:43:05.913 回答