javascript - 砌体布局(有时)在元素之间添加 1px 间距

Question

我已经用 Masonry 布置了 7 个元素。根据屏幕尺寸，有时会在第 2 行和第 3 行之间(有时也会在第 2 和第 3 列之间)出现 1px 的间距(空白)。

就我个人而言，我不希望在图 block /元素之间留有空间。谁知道是什么原因导致出现这条 px 线以及如何解决这个问题？

示例:http://wallstart.nl/test.html

导致:https://infinit.io/_/fJqNxKq

Answer 1

因为它没有为元素设置高度所以它们的高度计算基于:

padding: 10%;
font-size: 18px;
line-height: 1.5em;

字体大小没问题，但元素上的填充和行高(因为百分比和 em)导致高度具有 float (等等。height: 70.83px)。但我认为元素的位置是根据这些数字的上限值计算出来的。 (等 top: 71px)。所以它在某些缩放级别上看起来很奇怪。

如果这些在这个库中不支持或修复，我会尝试覆盖 .grid-item a 上的填充和行高以具有像素值。