Html div 左右半边的不同背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1277339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different background-color for left and right half of div
提问by Christoph
I have a centered div layout. The left side of the div in the background should be white and the right side should be green. Both should extend to infinity.
我有一个居中的 div 布局。背景中 div 的左侧应为白色，右侧应为绿色。两者都应该扩展到无穷大。
I think it should be quite simple but I just don't get it right now. Any easy solution? Thank you!
我认为它应该很简单，但我现在不明白。有什么简单的解决办法吗？谢谢！
-----------------------------------------------------
(div 1) __________________________
|(div 2) | |
| | |
| | |
<- white | white | green | green ->
| | |
| | |
|________________|_________|
------------------------------------------------------
采纳答案by Aaron Digulla
Add a background image with the two colors to the outer div and allow the browser to scale it (instead of tiling it).
将具有两种颜色的背景图像添加到外部 div 并允许浏览器对其进行缩放（而不是平铺）。
Each color should fill exactly 50% of the width of the image to make sure the colors will never leak on either side.
每种颜色应正好填充图像宽度的 50%，以确保颜色永远不会在任何一侧泄漏。
Maybe even position the image absolutely behind the inner div.
甚至可能将图像绝对放置在内部 div 后面。
For ideas how to stretch the image, see this question: CSS Background Repeat
有关如何拉伸图像的想法，请参阅此问题：CSS 背景重复
回答by Shaun Luttin
Use the ::afterand ::beforepsuedo elements. That way you can even get three colors and do the Italian flag!
使用::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;
}
Here's a fiddle: http://jsfiddle.net/g8p9pn1v/
这是一个小提琴：http: //jsfiddle.net/g8p9pn1v/
And its results: 
及其结果：
回答by James Wiseman
You could have two divs on the outside, and then have one of your divs in each. Right-align and left-align respectively. Like so:
你可以在外面有两个 div，然后每个都有一个你的 div。分别右对齐和左对齐。像这样：
-----------------------------------------------------
(div) | (div)
_________________|_________
|(div) | (div) |
| | |
| | |
<- white | white | green | green ->
| | |
| | |
|________________|_________|
|
------------------------------------------------------
回答by joncjordan
How about create two divs bg-left and bg-right, with a position absolute inside a full width container. Since they are absolutely positioned, you can then layer content on top of them. So for example, using bootstrap markup:
如何创建两个 div bg-left 和 bg-right，在全宽容器内具有绝对位置。由于它们是绝对定位的，因此您可以在它们之上分层内容。例如，使用引导标记：
<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>
Then your css:
然后你的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%;
}
回答by eyyo
You can use Gradient. This is a website where you can get the cross-browser code of what you need.
您可以使用渐变。这是一个网站，您可以在其中获取所需的跨浏览器代码。
http://colorzilla.com/gradient-editor/
http://colorzilla.com/gradient-editor/
It may be a little confusing to use at the begining but I find it a very powerfull tool.
一开始使用可能有点混乱，但我发现它是一个非常强大的工具。
Regards!
问候！
回答by Federico klez Culloca
I'd put inside that div two other divs and give them the appropriate sizes and backgound colors
我会在那个 div 里面放另外两个 div 并给它们适当的大小和背景颜色
