不同的背景色为DIV的左，右半

Question

我有一个居中的div布局。在后台div的左边应该是白色，右侧应为绿色。双方应扩大到无穷大。

我觉得应该是很简单，但我只是不明白这一点现在。任何简单的解决方案？ 谢谢！

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

Answer 1

与两种颜色添加背景图像提供给外层div和允许浏览器缩放（而不是平铺它）。

每个颜色应该填充图像的宽度，以确保颜色将永远不会在任一侧泄漏的准确的50％。

也许甚至图像定位绝对后面的内格。

有关想法如何拉伸图像，看到这样的问题： CSS背景重复

Answer 2

使用::after和::before伪元素。这样，你甚至可以得到三种颜色，做意大利国旗！

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

<强>这里的一个小提琴： http://jsfiddle.net/g8p9pn1v/

和它的结果：

Answer 3

您可以在外面两个div，然后在每个你的div之一。右对齐和分别为左对齐。像这样：

-----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------

Answer 4

如何创建两个div BG-左和BG-右，全宽容器内的绝对位置。由于它们是绝对定位，你可以那么层在它们上面的内容。因此，例如，使用自举标记：

<div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

然后你的CSS：

.fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}

Answer 5

我把该div其他两个的div内，给他们适当的大小和颜色backgound

Answer 6

可以使用梯度即可。这是一个网站，你可以得到你所需要的跨浏览器的代码。

http://colorzilla.com/gradient-editor/

这可能是有点混乱，在开始时使用，但我觉得这是一个非常强大的工具。

问候！