CSS列表项奇怪的定位

Question

我这个页面有一个无序列表和列表项：

https://artendijen.com/product-category/paintings/

在页面的末尾，有一个巨大的空间，其中2个列表项应该是，但不是。正如您可以通过查看附加照片或查看网站看到的那样：

这是列表项的CSS：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
margin: 0 3.8% 2.992em 0;
padding: 0;
position: relative;
width: 230px;
margin-left: 0;
}

我不知道为什么这样做？任何想法？

谢谢， Ĵ

Answer 1

这是因为li元素的高度不同。

添加以下内容将解决此问题：

.products.animals > li {
    height: 310px;
}