在Zurb Foundation 5中将背景水平分割成两半(使用不同的颜色)

Question

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

当不使用Foundation的网格系统时,这是一个简单的练习.例如,你可以使用下面的CSS与两个div id为的#blue和#black:

#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;
    }

}