Как на сетке 2 выравнивания столбцов?

Question

Как выровнять 2 уровня столбца?

Существует две колонки эскиза продукта WooCommerce, но сетка не выровнена.

Не могли бы вы сказать мне, как выровнять его?

Best
Jeil

Сетка из двух столбцов выровнена

Answer 1

Вы можете добавить min-height в контейнер каждого столбца продукта.Все ваши изображения выглядят одинакового размера, и причина выравнивания заключается в том, что названия продуктов иногда состоят из двух строк, а иногда из одной строки.

Другое решение состоит в том, чтобы убедиться, что есть clear: bothна контейнере продукта также.Стиль для стандартного магазина 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;
    }
}