css - 如何网格 2 列对齐？

Question

如何对齐 2 列级别？

WooCommerce 产品缩略图有两列，但网格不平整。

能告诉我怎么调平吗？

最好的，
一一

两列的网格是水平的

Answer 1

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

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

@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;
    }
}