如何网格2列对齐？

Question

如何对齐2个列级别？

WooCommerce产品缩略图有两列，但网格未拉平。

你能告诉我如何调平它吗？

最佳，
吉尔

两列网格被拉平

Answer 1

您可以在每个产品列的容器中添加min-height。您的图像看起来都一样大小，并且对齐不正确的原因是产品标题有时是两行，有时是一行。

另一种解决方案是确保产品容器上也有clear: both。在移动设备上显示2列布局的标准WooCommerce商店的样式为：

@media screen and (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 48%;
        float: left;
        clear: both;
        margin: 0 0 2.992em;
    }

    .woocommerce ul.products[class*=columns-] li.product:nth-child(2n),
    .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n) {
        float: right;
        clear: none!important;
    }
}