產品對齊問題Woocommerce

您好我正在巡航能力的一些問題與我的店面產品對齊問題Woocommerce

我添加一些代碼到我的自定義CSS與無濟於事對準我的產品圖片：

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

它有點幫助，但我仍然有一些在我的產品頁面上下浮動，這讓我瘋狂。任何提示將幫助我們最壞的情況下

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

來源

2015-11-20 Sargento48

這不是問題的圖像。標題/價格的高度不一致。最好的解決方法是將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; 
}

你必須做一些調整並放入瀏覽器前綴中 - 我用對齊項快速且骯髒。

來源

2015-11-20 04:44:51 Aibrean

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

回答

相關問題