左右两侧div不同的背景颜色

Question

我有一个居中的div布局。div的左侧背景应该是白色的，右侧应该是绿色的。两者都应该延伸到无限远。

我认为这应该很简单，但我现在就是做不好。有什么简单的解决方案吗？ 谢谢!

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

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

- Christoph

---

如果你在doctype.com上提问，你可能会得到一些进一步的想法。 - Rowland Shaw

Answer 1

使用::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/

以下是该示例网页的结果:

- Shaun Luttin

Answer 2

在外部div中添加一个具有两种颜色的背景图片，并允许浏览器进行缩放（而不是平铺它）。

每种颜色应该填满图像宽度的50％，以确保颜色不会泄漏到任何一侧。

甚至可以将图像绝对定位到内部div的后面。

有关如何拉伸图像的想法，请参见此问题：CSS背景重复

- Aaron Digulla

---

谢谢，效果非常棒！我甚至不知道你可以拉伸背景图片。 - Christoph

Answer 3

创建两个div，bg-left和bg-right，并将它们绝对定位在一个全宽容器内。由于它们是绝对定位的，因此您可以在它们上面叠加内容。例如，使用bootstrap标记：

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

- joncjordan

Answer 4

2021年最简单的方法：

.container {
  background: linear-gradient(
    to right, 
    red 0%, 
    red 50%, 
    black 50%, 
    black  100%
  );
}

- Oleg

---

谢谢 @Oleg！在找到你的答案之前，我自己想着，如果找不到简单的方法，我就用渐变吧。傻呀！ - undefined

Answer 5

你可以在外面放两个 div，然后分别将其中一个 div 放在每个 div 里面。右对齐和左对齐。就像这样：

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

- James Wiseman

---

但是这仅在两个外部div之间的线恰好位于屏幕的50％时才有效（而在我的布局中并非如此）？ - Christoph

Answer 6

你可以使用Gradient。这是一个网站，你可以获取你所需的跨浏览器代码。

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

一开始可能会有点困惑，但我发现它是一个非常强大的工具。

祝好！

- Daniel

Answer 7

我会在这个 div 里面放置另外两个 div，并给它们适当的大小和背景颜色。

- Federico klez Culloca

---

居中的div2已经在另一个div1内部了。它是通过使用margin:auto来居中的。我不认为我可以在那里再放两个其他的div？ - Christoph

当然可以。您需要添加另外两个div或处理重复的背景图像，让它为您进行颜色更改。 - YetAnotherDeveloper