如何在流体网格中删除第 12 列右侧的 1px 空白/坏点 [关闭]答案

【问题标题】：How to remove 1px blank / dead pixel on the right side of the 12th column in a fluid grid [closed]如何在流体网格中删除第 12 列右侧的 1px 空白/坏点 [关闭]
【发布时间】：2015-06-12 06:02:54
【问题描述】：

当 8 列浮动到 4 列旁边以形成完整的 12 列容器时，右侧会出现一个小的坏点，并在您缩放浏览器时再次出现。这似乎是由于四舍五入和小数位问题。

此网格是由不同的前端开发人员创建的自定义流体网格。当您拖动窗口时，它会出现和消失。有时它在那里，有时它不在。

我已经研究过更改此网格的百分比，但它根本无法解决此问题。有什么想法吗？

这是一个由工具为我生成的自定义网格的示例。使用这些数字并不能解决 1px 问题。

Span 1:    8.33333333333%
Span 2:    16.6666666667%
Span 3:    25.0%
Span 4:    33.3333333333%
Span 5:    41.6666666667%
Span 6:    50.0%
Span 7:    58.3333333333%
Span 8:    66.6666666667%
Span 9:    75.0%
Span 10:    83.3333333333%
Span 11:    91.6666666667%
Span 12:    100%

【问题讨论】：

既然这是一个响应式网格，它是窄布局还是宽布局的死角？我需要大约多宽的浏览器窗口才能更换问题？
可能是因为 66.666+33.333=99.999% 而不是 100。
@ScottRickman 当您缩放到容器宽度以上的不同尺寸时，它会消失并出现。
您可以在右列设置float: right。
让 grid_8 67% 和 grid_4 33%，这样就没有四舍五入的错误了？

标签： html css responsive-design fluid-layout

【解决方案1】：

jeromeM 的回答是正确的。我从 Foundation 中提取了这个：

[class*="column"] + [class*="column"]:last-child {
  float: right;
}

最后一列应始终向右浮动以解决此问题。 1 个像素将由右浮动的最后一列处理。

【讨论】：