纯CSS解决方案阻止流出网格

Question

我已经说明了这种情况：

蓝线表示网站所在的网格。现在让我们假设一个960网格，左边是300px（红色部分），是20px间隙，右边是剩余的640px（黑色）和绿色部分）。我想知道是否有针对此问题的解决方案没有使用calc()（由于较旧的浏览器）或background-image（因为它并不是很漂亮）。

有没有一种漂亮的方法可以让这项工作，只使用CSS同时保持内容在网格中居中，背景一直流到屏幕的边框？

Answer 1

http://codepen.io/anon/pen/avoKwQ

由伪元素和绝对定位完成。使用bootstrap进行更快速的演示。实际上，这是一个特定的问题，我的解决方案可能不适合您的项目。当您需要水平滚动时尤其不起作用。但问题解决了。

&:after {
  content: " ";
  position: absolute;
  top: 0; right: 6px;
  width: 99999%;
  height: 100%;
  background: red;
  z-index: -1;
}

此元素的父级需要position: relative。在示例中，这是通过bootstrap完成的。

Answer 2

Flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这个列的附加好处是列总是相等的高度：

* { margin:0; padding:0; box-sizing: border-box; }
.grid {
    display: flex;
}

.col-3 { 
    flex: 1 1 320px;
    border-right: 20px solid #fff;
}
.col-2-3 { 
    flex: 1 1 640px;
}

.col-3 {
    display: flex;
    justify-content: flex-end;
}
.col-3>div {
    padding: 20px;
    flex: 0 1 300px;
}

.col-2-3>div {
    display: flex;
    justify-content: flex-start;
}
.col-2-3>div>div {
    flex: 0 1 640px;
    padding: 20px;
}

.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}

<div class="grid">
    <div class="col-3 red">
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
            </p>
        </div>
    </div><!-- col -->
    <div class="col-2-3 green">
        <div class="black">
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
                </p>
            </div>
        </div><!-- .black -->
        <div class="green">
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
                </p>
            </div>
        </div><!-- .green -->
    </div><!-- .col -->
</div><!-- .grid -->