产品网格无法正确对齐 Woocommerce、Wootique 主题答案

【问题标题】：Product grid won't align properly Woocommerce, Wootique theme产品网格无法正确对齐 Woocommerce、Wootique 主题
【发布时间】：2018-01-20 20:52:27
【问题描述】：

您好，我的 woocommerce 产品显示有问题，网格一直未对齐，因此一行中有一个，而其他的则紧挨着我尝试添加一些自定义 css：

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  min-height: 293px !important;
}

在我安装插件 YITH AJAX Product Finder 之前它暂时解决了这个问题，它似乎已经变回了不确定是否相关的方式......我尝试增加高度以查看是否有帮助但它没有不。有什么想法吗？这是产品页面的链接...

http://casper-creations.com/product-category/caketoppers/

我正在使用 wootique 主题...

【问题讨论】：

标签： html css ajax wordpress woocommerce

【解决方案1】：

好的，我已经更改了一些 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%

custom.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%;
}

【讨论】：

您好，感谢您的快速回复，我尝试了您的代码更新，但现在这只是连续 2 次，有些仍然感人，我相信我已经按照您说的做了...
能否再申请一次，让我仔细看看？也许其他一些规则会覆盖添加的规则。
啊，对不起，我的浏览器缓存了旧的
将宽度更改为 30%。
放宽：30%；回到第 251 行？我试过没有变化