最佳答案
您可以为每个产品列的容器添加一个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;
}
}
关于css - 如何网格 2 列对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54309214/