在Zurb Foundation 5中将背景水平分割成两半（具有不同的颜色）

Question

有没有办法在使用Foundation的网格系统时分割全宽行50/50的背景？以下是我尝试做的一个例子：

这是一个简单的练习，不使用Foundation的网格系统。例如，您可以使用以下CSS和两个ID为#blue和#black的div：

#blue{
    float:left;
    background-color:blue;
    width:50%
    height:100%;
    color:black;
}
#black{
    float:right;
    background-color:black;
    width:50%
    height:100%;
    color:white;
}

但是，我很难实现这一点，同时保留与页面上其余行填充对齐的页面填充。

在基础网格系统中有没有一种简单的方法可以做到这一点？现在，它看起来似乎不得不打破框架并进行一大堆格式化和媒体查询，以确保所有内容与我的其他内容保持一致。想法？

Answer 1

布雷特的回答是这样做的。我对他的答案进行了一些小修改，并根据我的用例进行了调整。最后，我的彩色部分看起来类似于以下内容：

#section {
    background-image: -webkit-linear-gradient(left, #b2dcc6, #b2dcc6 49%, #333333 49%);
    background-image: linear-gradient(to right, #b2dcc6, #b2dcc6 49%, #333333 49%);
}

@media only screen and (max-width: 40em) {

    #section > .row > .columns:first-child {
        background-color: #b2dcc6;
    }

    #section > .row > .columns:last-child {
        background-color: #333333;
    }

}

Answer 2

您可以在正文上使用CSS背景渐变。并删除它以进行小型媒体查询。

body {

  background: linear-gradient(left, #b3ddc5 49%,#333333 49%,#333333 `100%);

}

结果类似于 this

Answer 3

在元素包装器上使用负边距，并使用填充进行补偿。