1140px 网格对齐问题答案

【问题标题】：1140px grid alignment issues1140px 网格对齐问题
【发布时间】：2012-09-13 03:32:34
【问题描述】：

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

我想在第一行有 3 张图片，每张有 4 列，然后在下面的其余行有 4 张每张 3 列的图片。

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

我的索引页面代码在这里： http://pastebin.com/c76U7J5g

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

【问题讨论】：

给我们看一些代码。 jsfiddle.net
您可以发布您现在使用的代码吗？如果没有看到您当前的实施情况，很难提供任何建议
我只是查看此网格中的默认代码。如果您从 CSSgrid.net 下载它并检查列，您就会明白我的意思。我还添加了我的特定 index.html 代码，以便您更清楚地看到问题。
您可以添加代码结果的屏幕截图吗？

标签： css grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果我明白发生了什么，这似乎是一个简单的错误。

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

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

编辑：

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

.last {
float: right;
}

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

【讨论】：