纯CSS解决方案块流出网格 [英] Pure CSS solution blocks flowing out of grid

问题描述

我举例说明了这种情况：

I've made an illustration of the situation:

蓝线表示网站的网格现在让我们假设一个960网格，一个300px左侧（红色部分），一个20px的差距，其余640px的右侧（黑色和绿色部分）。我想知道是否有这个问题的解决方案不使用 calc（）（由于旧的浏览器）或 background-image （因为那不是很漂亮）。

The blue lines illustrate the grid the website is in. Let's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there's a solution for this problem that doesn't use calc() (due to older browsers) or background-image (because that's not really pretty).

有一个漂亮的方法来使这项工作，使用CSS同时保持内容居中在网格内，

Is there a pretty way to make this work, using just CSS while keeping the content centered within the grid, and the backgrounds flowing all the way to the borders of the screen?

推荐答案

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

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

Done by pseudo elements and absolute positioning. Used bootstrap for faster demo. Actually, it is a specific problem and my solution may not fit your project. Especially not work when you require horizontal scrolling. But problem is solved.

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

这个元素的父代ofcourse require position： / code>。例如，这是通过bootstrap。

Parent of this element ofcourse require position: relative. In example this is done by bootstrap.

这篇关于纯CSS解决方案块流出网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！