0

我正在 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。任何人都可以请指导如何做到这一点或更好的方法。

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

4

2 回答 2

0

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

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

这是一个简单的例子：http: //jsfiddle.net/CA669/950/embedded/result/

于 2013-11-07T17:23:50.730 回答
-1

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

我能想到的另一种方式是你目前的做法。我不得不做类似的解决方案。

于 2013-11-07T17:15:30.067 回答