html - 纯CSS方案 block 流出grid

Question

我已经说明了这种情况:

蓝线表示网站所在的网格。假设现在有一个 960 的网格，左侧有 300 像素(红色部分)，间隙为 20 像素，右侧剩余 640 像素(黑色和绿色部分) .我想知道这个问题是否有不使用 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 完成的。