Bootstrap3网格 - 2种背景颜色

Question

如何制作如下图所示的效果？

我想要一个有2列的容器。较小的列应位于黄色背景上，较大的列应位于白色上。黄色应该从左侧开始，并在col-xs-4的右端完成。

Answer 1

是的，使用伪元素。

注意这里的一般布局方法并不重要（我使用flexbox进行练习），但伪元素技术很常见。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  width: 50%;
  height: 300px;
  margin: auto;
  border: 1px solid grey;
  display: flex;
}
.container div {
  border: 1px solid green;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}
/* MAGIC */

body {
  overflow: hidden;
  /* prevent scrollbars */
}
.left {
  position: relative;
  /* positioning context */
}
.left:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  /* half viewport width */
  height: 100%;
  /* parent height */
  background: orange;
  z-index: -1;
  /* push under parent */
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>