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

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 完成的。