行与 Skel 之间的边距答案

【问题标题】：Margin between rows with Skel行与 Skel 之间的边距
【发布时间】：2017-06-04 10:38:20
【问题描述】：

我正在使用 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 ]

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

【问题讨论】：

标签： javascript html baseline skel

【解决方案1】：

像这样更新你的 CSS：

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

您可以随意控制宽度。

【讨论】：

无论我是否添加边距，它似乎都没有改变任何东西。你能再解释一下，这样我可以更好地适应它吗？
Divs 是块级元素，默认情况下它们总是占据一整行。要更改此行为，请使用“浮动”。检查这个小提琴：jsfiddle.net/fs46hath
我知道这一点。我说我正在使用 Skel 网格系统来设置我的响应式布局。您的解决方案有效，但不要使用 Skel 系统并且没有响应。这是一个与 Skel 相关的问题，所以我期待与 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>

说明：

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

【讨论】：