您好,我的 woocommerce 产品显示有问题,网格保持未对齐,所以有一个在一条线上,而其他的则彼此相邻我尝试添加这一点自定义 css:
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
min-height: 293px !important;
}
它暂时解决了这个问题,直到我安装了 YITH AJAX Product Finder 插件,它似乎又变回了不确定是否相关的状态……我尝试增加高度以查看是否有帮助,但它没有't。有什么想法吗?这是产品页面的链接...
http://casper-creations.com/product-category/caketoppers/
我正在使用 wootique 主题...
最佳答案
好的,我已经更改了一些 CSS,以正确对齐您的产品框。将以下更改应用到您的 CSS -
style.css - 第 247 行
ul.products {
margin-left: 0;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
zoom: 1;
display: initial; /* Added */
}
style.css - 第 251 行
删除float: left
和width: 30.75%
自定义.css
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
display: inline-block; /* Added */
vertical-align: top; /* Added */
width: 30%; /* Added */
}
编辑 - 请尝试将其添加到您的 custom.css 的末尾,这样我们就可以确保这些规则不会被其他 CSS 覆盖。
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
min-height: 293px !important;
display: inline-block;
vertical-align: top;
width: 30%;
}
关于html - 产品网格无法正确对齐 Woocommerce、Wootique 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28463371/