css - 如何使用 2 列布局将背景颜色扩展到左右全宽

Question

我正在尝试使用两列布局实现一种效果，其中左侧列将其背景色向左扩展至全宽，而右列将其背景色向右扩展至全宽.

所以它就像“全宽度带”，但左边的颜色与右边的颜色不同...所以在 this example screenshot 中我们将在左侧有一个全宽的黄色带，然后是一个全宽的薄荷色带，但在右侧有一个全宽的绿色带，然后是一个全宽的栗色带。

这是否可以通过 CSS 实现，如果可以，如何实现？

我用谷歌搜索并找到了一些使用

的例子

overflow-x:hidden

但这些似乎只适用于左右颜色相同的“全宽带”。希望有人能帮忙!

谢谢!

Answer 1

这样的事情怎么样？

<div id="div1">
    <div>Left div</div>
</div>
<div id="div2">
    <div>Right div</div>
</div>

还有 CSS:

#div1 {
    width: 50%;
    float: left;
    background: yellow;
}

#div1 div {
    padding-left:30%;
}

#div2 div {
    padding-right: 30%;
}

#div2 {
    width: 50%;
    float: right;
    background: green;
}

2 个宽度为 50% 并向左/向右浮动的容器 div。然后在每个内部都有一个 div，左/右填充。

可能有效，具体取决于您现有的代码结构!请参阅此处的示例:http://jsfiddle.net/dCEKA/ .