我有一个居中的div布局。背景中div的左侧应为白色,右侧应为绿色。两者都应该延伸到无穷大。
我想应该很简单,但我现在就是不明白。有简单的解决办法吗?谢谢你,谢谢!
-----------------------------------------------------
(div 1) __________________________
|(div 2) | |
| | |
| | |
<- white | white | green | green ->
| | |
| | |
|________________|_________|
------------------------------------------------------
7条答案
按热度按时间sqougxex1#
使用
::after
和::before
伪元素。这样你甚至可以得到三种颜色和做意大利国旗!Here's a fiddle:http://jsfiddle.net/g8p9pn1v/
其结果是:
d6kp6zgx2#
将具有这两种颜色的背景图像添加到外部div,并允许浏览器缩放它(而不是平铺它)。
每种颜色都应该填充图像宽度的50%,以确保颜色不会在任何一侧泄漏。
甚至可以将图像完全放置在内部div后面。
有关如何拉伸图像的想法,请参阅此问题:CSS Background Repeat
33qvvth13#
如何创建两个div bg-left和bg-right,在一个全宽容器中有一个绝对位置。由于它们是绝对定位的,因此您可以在它们上面放置内容。例如,使用bootstrap markup:
你的CSS:
z3yyvxxp4#
2021年最简单的方法:
xzv2uavs5#
你可以在外面放两个div,然后在每个里面放一个div。分别右对齐和左对齐。就像这样:
lymgl2op6#
我会在这个div中放入另外两个div,并给它们给予适当的大小和背景颜色
vojdkbi07#
您可以使用渐变。这是一个网站,你可以得到你需要的跨浏览器代码。
http://colorzilla.com/gradient-editor/
这可能是一个有点混乱的使用在一开始,但我发现它是一个非常强大的工具。
问候!