Html 带特定填充背景色的居中2列布局

我正在尝试创建以下布局，但我想不出来

• 分区A的宽度为66%，并填充左侧的剩余空间
• B区和C区的宽度为33%，填充右侧的剩余空间
• 所有div都位于100%居中的容器内

重要的是，我希望divb和C有自己的背景色。Div A将只使用主体的背景色

正如我在本文中所说

最明显的解决方案就是关闭容器……让您的全宽div打开一个新容器。标题“container”只是一个类……并不是一个绝对的要求，要求它同时保存所有内容

仅出于装饰（背景）目的，可以使用伪元素

html{
框大小：边框框；
}
*,
：：之前，
：：之后{
框大小：继承；
}
html，
身体{
身高：100%；
}
身体{
溢出：隐藏；
}
.集装箱{
身高：100%；
宽度：50%；
保证金：自动；
左边框：1px纯色灰色；
右边框：1px纯色灰色；
填充顶部：50px；
/*仅用于演示目的*/
}
.盒子：之后{
/*clearfix*/
内容：“；
显示：表格；
明确：两者皆有；
}
.左{
宽度：66.666%；
高度：100px；
浮动：左；
位置：相对位置；
}
.对{
宽度：33.333%；
高度：50px；
浮动：对；
位置：相对位置；
}
.左：：之前，
.对：：之前{
内容：''；
位置：绝对位置；
排名：0；
身高：100%；
宽度：100vw；
z指数：-1；
}
.left：如果需要，在{/*left版本之前*/
背景：浅蓝色；
右：0；
}
第一：以前{
背景：浅绿色；
左：0；
}
.2:以前{
背景：粉红色；
左：0；
}

嗨，Joost，你能给出你的代码吗？添加你尝试过的内容。我稍后会给出一个例子，出现了一些问题。