Django 无限滚动搞砸了设计。 CSS 需要修正

Question

我正在使用 Django 开发一个网站。网站链接是， http://flooroof.com/listings/

您可以看到网站上的图块相互重叠。这发生在我实现无限滚动之后。我在下面的链接中找到了它， https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html

如果您向下滚动，您会看到越来越多的属性正在加载。一次我要加载 20 个列表。但不确定出了什么问题。

我知道 CSS 有问题，但我不确定是什么问题。

请指导。

Answer 1

是的，我可以看到 CSS 存在问题，尤其是在第一个 .infinite-item 之后出现的 .grid-item 中。我 .grid-item 具有绝对位置，只有第一个 .infinite-item 的 .grid-item 具有正确的 left 和 top 值。如果你想要一个快速的解决方案，那么你可以这样做。

a.grid-item
{
    left: auto !important;
    top: auto !important;
    position: relative !important;
}

另一个问题是图像大小。您的图像大小彼此非常不同，因此最好的解决方案是使用具有固定高度的空白 1px 透明图像并将当前图像显示为背景图像。