django - Django 无限滚动搞砸了设计。CSS 需要修正
问题描述
我正在使用 Django 开发一个网站。网站链接是, http: //flooroof.com/listings/
您可以看到网站上的图块彼此重叠。这发生在我实现无限滚动之后。我在下面的链接中找到了它, https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html
如果向下滚动,您会看到越来越多的属性正在加载。一次我要加载 20 个列表。但不确定出了什么问题。
我知道 CSS 有问题,但我不确定它是什么。
请指导。
解决方案
是的,我可以看到 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 透明图像并将当前图像显示为背景图像。
推荐阅读
- mysql - 检索每个组中的最后一条记录 - 按多列分组
- python - 熊猫列值的排序排列?
- c# - 如何从主键中获取对象
- javascript - 在 Promise 中将项目添加到数组时遇到问题
- node.js - 将参数从 Jenkins CI 传递到 npm 脚本
- python - 使用硒从非传统地图中抓取 GIS 坐标?
- wireshark - 如何使用 mbuf 构造 IP 有效负载数据包?
- c++ - 使用 c_str() 或 toCharArray() 将字符串转换为 const char?
- node.js - 在子目录中托管应用程序时的 ExpressJS API 路由
- java - 使用泛型构造子类的实例