Javascript 如何在基础4中两个6柱之间增加空白？ 我在ZURB基金会4和SASS开发了一个网站。p>

我的代码如下所示：

<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，并向其应用columns和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，这仅仅是为了设计。任何人都可以指导如何做或更好的方法

---

我还想知道如何从一侧（左侧或右侧）折叠柱

你能让这一行有白色背景吗？这样排水沟就会变成白色

---

我能想到的另一个方法是你现在是怎么做的。我不得不做类似的解决方案

使用CSS会容易得多-通过使用属性，顾名思义，它允许您剪裁元素背景的绘制区域

由于基础中的沟槽宽度在填充框内，可以使用<代码>内容框Value/<

---

下面是一个简单的例子：

我的代码是哪一个？第一个或第二个。它与第二个有效，但在这种情况下，我的问题仍然存在。难道你不认为再增加两个div对DOM来说是不必要的节点吗？对于第一个代码，这不会发生。哦，对不起，对于第一个示例，您将有一个带.whitebg的.row，然后是两个子列，它们有各自的颜色。是的，两个以上的div有点不必要，但我不认为这是一个大问题。这是使用框架的一部分权衡，但使用两个额外的div并不是世界末日。这真的很酷，我不知道如何使用背景剪辑。在jsFiddle中，红色的有

！重要信息

，绿色的不重要。当我看到它时，红色的是唯一受影响的。你真的要用吗！这对工作很重要吗？我只是好奇。我喜欢它，但所有主流浏览器都支持它。是的，除了IE8，所有主流浏览器都支持它@芬克：不，那不是故意的。无论您是否使用

，此属性都有效！重要信息

与否。虽然绿色的div会延伸到填充的边缘，但红色的div不会。但是如果我把

！重要提示

在绿色背景剪辑上，然后它似乎工作正常。（Chrome-Dev，Mac）编辑：我改变了绿色div上属性的顺序，这使它工作起来。真奇怪。