1

我正在开发一个响应式网站。该网站在背景中有可见的网格线，您可以将其与此进行比较：http: //fearonhay.com/（背景中的灰色线条非常柔和）。但是有一个区别，这让我很难找出解决它的最佳方法：网站是响应式的（% 宽度）。

我做了一个非常粗略的草稿，它应该是什么样子。实际上不仅有三列，还有四列：

网格

我创建了一个快速小提琴（在 Chrome 中查看）来测试它是否按我的意图工作：http: //jsfiddle.net/T76MK/

.lines {
    background-image: -webkit-linear-gradient(0, black 1px, transparent 1px);
    background-size: 25% 100%; 
}
.grid {
    margin-left: -30px; /* Gutter */    
}
.grid__item {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 30px; /* Gutter */
    vertical-align: top;    
}
.one-quarter { width: 25%; }
.red { background: red; }

如您所见，我对线条使用了线性渐变，但第二条和第四条线偏离了几个像素。它们没有在排水沟内正确居中。第三行看起来不错。任何想法如何解决这一问题？

提前致谢。

4

1 回答 1

0

您的代码存在/存在很多问题...

这就是我要做的：http:
//jsfiddle.net/T76MK/7/

问题：你为什么在这里使用双下划线？不好....grid__item

此外，如果您需要那些排水沟（您永远不应该使用负边距），您可能在您的站点/页面的其余部分中存在一些其他代码问题，您可能想要查看。

于 2013-11-15T00:37:52.057 回答