1

嗨,我正在建立一个画廊风格的网站,我对使用 cssgrid.net 中的 1140px 网格非常感兴趣,因为我觉得 960px 对于这个项目来说太小了。

我想在第一行有 3 张每列四列的图像,然后在下面的其余行中有 4 张每列 3 列的图像。

问题是,一旦我这样做,两行的右边缘就不会对齐,显然画廊看起来不会那么好。我知道这是由于在此网格中使用百分比构建列而导致四舍五入造成的。但是它看起来仍然很糟糕,我想让它们以某种方式对齐。解决方案是什么?

我的索引页面代码:http: //pastebin.com/c76U7J5g

要看到这种情况发生,您必须下载 cssgrid.net 网格

在此处输入图像描述

4

2 回答 2

2

基于百分比的布局不是像素完美的。我在我的一个项目中使用了 css 框架http://www.1140px.com/,我很满意。如果您想要像素完美的布局,您可以尝试一下。

于 2012-09-12T19:32:34.380 回答
1

如果我了解正在发生的事情,那似乎是一个简单的错误。

您的占位符图像(猫)太小。在这个网格系统中使用占位符图像可能会很棘手,因为您必须声明您希望占位符的大小。实际上,在您的实时页面上,图像不会指定尺寸,因为它会破坏网格系统(网格只会将图像缩小到适合您放入的列中的最大尺寸)。

长话短说,占位符图像太小了!在它们的全尺寸下,它们不会填满网格点,因此会导致您描述的奇怪定位。话虽如此,我总是放置至少 1000 像素的占位符,以便它们可以适当地缩小。

编辑:

尝试做基金会所做的事情:

.last {
float: right;
}

将其添加到样式表 - 它应该对齐最后一列的右边缘。

于 2012-06-29T16:42:43.440 回答