css - Woocommerce 类别图像缩略图

Question

我已经与这个问题斗争了好几个星期了。出于某种原因，有代码覆盖了类别 View 中我的 woocommerce 产品图像的大小/对齐方式。没有任何代码，它会显示 2 个产品填充整个空间，即使我有一个插件正在运行，它应该每行显示 4 个产品。

我目前正在按照另一位用户的建议使用以下代码，这使我获得了正确的尺寸并每行显示 4 个，但它似乎随机选择在某些行上显示不同的数字，在产品应有的地方留下空白。

.woocommerce ul.products li.product:nth-child(2n), 
.woocommerce-page ul.products li.product:nth-child(2n) 
{
   float: left; 
   clear: none!important; 
}

.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product 
{
   width: 24%;
   margin: 0 0 2.992em 0.4875em;
   clear: none;
}

可以看到这里发生了https://www.raymondmayjewellers.com/product-category/accessories/以及网站上任何其他类别页面上的不同方式。

有什么想法是 a) 导致最初的问题(由代码部分解决)或 b) 为什么新代码偶尔返回少于 4 行？

Answer 1

我不知道你是否知道，但你覆盖了太多行，这可能会导致问题。

解决方法:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
 width:22% !important; /* this line is around 1031 line number*/
 margin: 0 0 2.992em 0.4875em;
 }

注意:我已经删除了clear:none。

结果如下: