列之间的Zurb基金会保证金

Question

我有一个非常简单的基础CSS代码

<div class="row">
    <div class="large-offset-1 large-6 columns">Content goes here</div>
    <div class="large-4 end columns">Side goes here</div>
</div>

我希望列之间有边距。目前，只有填充。因此，如果我将background-color添加到这些列中，那么它们会互相粘贴。

基金会没有为此提供解决方案吗？

Answer 1

试试这个（它在另一个内部创建一个全宽度div，自动添加边距）

<div class="large-4 medium-6 small-12 columns">
    <div class="large-24 columns">
        ... content ...
    </div>
</div>

Answer 2

你可以试试这个：

<div class="row">
  <div class="large-offset-1 large-6 columns padded-column">
    <div class="column-content">Content goes here.</div>
  </div>
  <div class="large-4 end columns padded-column">
    <div class="column-content">Side goes here</div>
  </div>
</div>

然后，对于样式：

.padded-column {
  padding: 10px;
}
.column-content {
  background: red;
}

Answer 3

我有一个类似的问题，无法用填充解决。由于Foundation 5不兼容IE8，我只使用calc例如。 width: calc(50% - 10px);