如何在基础4中的每个6列的两个div之间添加空格？

Question

我正在Zurb Foundation 4和SASS开发一个网站。

我的代码如下：

<div class="row">
   <div class="large-6 columns redbg"> content goes here... </div>
   <div class="large-6 columns greenbg"></div>
</div>

两个内部div都有背景。我有一个30px的柱形水槽。我希望这个水槽是白色的。可能的解决方案是为两个内部div添加父div并将列和large-6类应用于它，这样代码看起来像：

<div class="row">
   <div class="large-6 columns">
        <div class="redbg">  content goes here... </div>
   </div>
   <div class="large-6 columns">
        <div class="greenbg"> content goes here... </div>
   </div>
</div>

但是通过应用这个解决方案，我必须创建两个div，仅用于设计。任何人都可以指导如何做或更好的方法。

我也想知道如何从一侧（左侧或右侧）折叠一列？

Answer 1

使用CSS会更容易 - 使用background-clip属性，顾名思义，它允许您剪切元素背景的绘画区域。

由于基础中的装订线宽度位于填充框内，因此您可以使用content-box值。

以下是一个简单示例：http://jsfiddle.net/CA669/950/embedded/result/

Answer 2

你可以让行有白色背景吗？这样，排水沟将是白色的。

我能想到的另一种方式是你目前是怎么做的。我必须做类似的解决方案。