在 Zurb Foundation 5 中将背景水平分成两半（不同颜色）答案

【问题标题】：Splitting background horizontally in half (with different colors) in Zurb Foundation 5在 Zurb Foundation 5 中将背景水平分成两半（不同颜色）
【发布时间】：2015-06-22 19:10:25
【问题描述】：

在使用 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;
}

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

在留在基金会网格系统中的同时，有没有一种简单的方法可以做到这一点？现在，似乎我将不得不打破框架并进行一大堆格式化和媒体查询，以确保一切都与我的其余内容保持一致。想法？

【问题讨论】：

标签： html css responsive-design zurb-foundation

【解决方案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;
    }

}

【讨论】：

【解决方案2】：

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

body {

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

}

结果将类似于 this

【讨论】：

你的代码有几个问题，但它确实让我到达了我需要的地方。感谢您提供优质的答案。这是更新的代码：background-image: linear-gradient(to right, #b2dcc6, #b2dcc6 49%, #333333 49%);
你肯定会想要使用浏览器前缀的版本。不幸的是，我的浏览器是为我的浏览器量身定制的，我没有在其他浏览器上进行测试。很高兴它有所帮助。

【解决方案3】：

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

【讨论】：