产品对齐问题Woocommerce

问题描述：

您好我正在巡航能力的一些问题与我的店面产品对齐问题Woocommerce

我添加一些代码到我的自定义CSS与无济于事对准我的产品图片：

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

它有点帮助，但我仍然有一些在我的产品页面上下浮动，这让我疯狂。任何提示将帮助我们最坏的情况下

例子：http://monkeybusinessvapor.com/product-category/accessories/

这不是问题的图像。标题/价格的高度不一致。最好的解决方法是将js用于相同的高度（或flexbox）。或者，您可以将标题/价格放在快速查看（图片，快速查看，标题，价格 - 按此顺序）下。 – Aibrean

柔性箱我认为应该在这里完美工作。 – Aakash

答

如果你想快速的Flexbox的路线......

ul.products { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 
} 
ul.products li{ 
    padding-bottom: 20px !important; 
    /*because woocommerce-mod overwrites it*/ 
} 
a.yith-wcqv-button.button { 
    position: absolute; 
    bottom: 0; 
}

你必须做一些调整并放入浏览器前缀中 - 我用对齐项快速且肮脏。

Woocommerce必须重写它，我在开发人员工具中添加 – Sargento48

ul.products {display：-webkit-box; display：-webkit-flex; display：-ms-flexbox; display：flex; -webkit-flex-wrap：wrap; -ms-flex-wrap：wrap; flex-wrap：wrap; -webkit-box-align：stretch; -webkit-align-items：stretch; -ms-flex-align：stretch; align-items：stretch; } ul.products li padding-bottom：30px！important; } a.yith-wcqv-button.button { position：absolute; bottom：0; } – Sargento48

工作真棒，谢谢！我已经进入我的主题自定义CSS，再次尝试在我的孩子主题，并完美的作品 – Sargento48

产品对齐问题Woocommerce

相关推荐