我正在使用Wordpress插件＆＃34; Woocommerce＆＃34;。
我不满意我的产品的标准四列布局意味着当浏览器宽度变窄时它们都变得太小，所以我尝试使用媒体查询来转换它们当浏览器达到-1250px时，进入三列布局。
插件使用的边距css存在一些问题，因为它预设为除最后一个产品外都有一个边距权限。 我已将此更改为使用
定位第三项而非第四项 .woocommerce-page ul.products li.product:nth-child(3n+3) {
margin-right: 0px;
}
然后我通过添加右边距来修复第四个边框，给它初始设置的margin: 0 3.8% 2.992em 0;默认边距值。
但由于某种原因，第三个之后的物品漂浮在整个地方，我不知道为什么。
任何人都可以告诉我可能导致这种情况的原因以及如何解决这个问题吗？
显示此问题的示例页面是：http://www.lucieaverillphotography.co.uk/product-category/prints/
答案 0 :(得分：1)
这发生在我身上。如果你看一下css，woocommerce会在最后一个项目（或li）中分配一个“last”类，并在第一个项目中“first”。
当您调整窗口大小并更改为3项结构时，最后一项是第一项。
您需要定位这些类，可能会在特定断点处或完全删除它们的属性。您可以首先尝试删除.first和.last的clear属性。