中心2列布局，具有特定的填充背景颜色

Question

我试图创建以下布局，但我无法弄明白。

• Div A的宽度为66％，并填充左侧的剩余空间
• Div B和C的宽度为33％，并填充右侧的重复空间
• 所有div都在100％居中的容器内

导入的东西是我希望div B和C有自己的背景颜色。 Div A将使用身体的背景颜色。

Answer 1

正如我在answer

中所说的那样

  

最明显的解决方案是关闭容器...拥有全宽div然后打开一个新容器。标题＆＃39;容器＆＃39;只是一个阶级...并不是绝对要求它同时拥有所有东西。

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

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: inherit;
}
html,
body {
  height: 100%;
}
body {
  overflow: hidden;
}
.container {
  height: 100%;
  width: 50%;
  margin: auto;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  padding-top: 50px;
  /* demo purposes only */
}
.box:after {
  /* clearfix */
  content: "";
  display: table;
  clear: both;
}
.left {
  width: 66.666%;
  height: 100px;
  float: left;
  position: relative;
}
.right {
  width: 33.333%;
  height: 50px;
  float: right;
  position: relative;
}
.left::before,
.right::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw;
  z-index: -1;
}
.left:before { /* left version if required*/
  background: lightblue;
  right: 0;
}
.one:before {
  background: lightgreen;
  left: 0;
}
.two:before {
  background: pink;
  left: 0;
}

＆＃13;

<div class="container">
  <div class="box">
    <div class="left"></div>
    <div class="right one"></div>
    <div class="right two"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;