等距行图像未对齐 html / css

Question

我有一个网站，其中 3 个页面有一行图像，可以在鼠标悬停时查看更大的图像。在 2 页上，对齐效果很好，一行中有 6 个图像。无法正常工作的第三页每行有 5 个图像。

包含 6 个图像的页面完美对齐 - 最左边的图像独立存在，向左浮动，其他 5 个图像位于 div（移动器行）内自己的 div 中，并且间隔 20%。此工作页面的代码位于： http://jsfiddle.net/AvNJY/

所以使用相同的逻辑我尝试让只有 5 个图像的行进行对齐，再次执行与上面相同的操作并将距离设置为 25%。这使得该行中的最后一个图像跳到其他图像下方。我研究了这个百分比，由于某种原因，当以 100% 的比例查看时，24.4% 看起来似乎在除 Firefox 之外的所有浏览器中都正确对齐。然而，一旦您在任何浏览器中放大站点，最后一个图像就会再次跳到其他图像下方（在 Firefox 中，这种情况会自动发生）。我想知道我在这个页面上做错了什么，因为我已经尝试了我能想到的一切 - 并且无法理解为什么 25％ 的人不这样做。此页面的代码位于： http://jsfiddle.net/9K74d/

我非常感谢一些帮助如果有人知道答案。提前致谢！

Answer 1

您在 jsfiddle 中的示例不清楚，但请尝试以下操作：

为 #studiomovers-row 添加 overflow:auto 并删除此 id 的 margin 。

Answer 2

这可能是一个舍入错误 - 浏览器的数学能力可能出人意料地差，并会产生意外的舍入错误。将你的百分比降低到 24 甚至 23，看看是否有效。您始终可以尝试将图像放入单个 div 容器中，调整大小为正确的预期大小，并设置溢出：隐藏，以防出现一两个像素溢出。这给了你一点误差，这比布局中断要好得多。