html - 具有特定填充背景颜色的居中 2 列布局

Question

我正在尝试创建以下布局，但我无法弄清楚。

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

重要的是我希望 div B 和 C 有自己的背景颜色。 Div A 将只使用正文的背景颜色。

Answer 1

正如我在 answer 中所说的

The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.

仅用于装饰(背景)目的，您可以使用伪元素。

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;
}

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