Css 如何使用2列布局将背景色扩展到左右两侧的全宽

我试图通过两列布局实现一种效果，左侧列将其背景色向左延伸至全宽，右侧列将其背景色向右延伸至全宽

所以它就像“全宽带”，但左边和右边的颜色不同。。。因此，我们在左边会有一个全宽的黄色带，然后是全宽的薄荷带，但在右边会有一个全宽的绿色带，然后是全宽的栗色带

CSS是否可以实现这一点？如果可以，如何实现

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

overflow-x:hidden

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

---

谢谢

像这样的怎么样

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

2个50%宽度的容器分区，左/右浮动。然后在每一个控件中添加一个div，并使用左/右填充

可能会工作，这取决于您现有的代码结构！请参见此处的示例：

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

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

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

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