Почему криво встают товары?

Question

[Smeecy Smeecy]

Стоит стандартный шаблон oc 2.0 , но товары в категориях криво отображаются, из-за чего может такое быть?

Answer 1

[Дима Паутов]

Потому что карточки товара все сверстаны через float. И, если их высота разная, что видно на картинке, то они выбивают те, что лежат под ними. Так работают float'ы. Используйте inline-block, flexbox, или укажите всем блокам одинаковую высоту. А лучше ограничивайте высоту заголовка и описания товара используя фиксированную высоту + overflow: hidden. А так же, к последнему пункту можно добавить это свойство

Answer 2

[Mike]

На SCSS будет так:

@mixin justifyBlocks {
    text-align: justify;
    font-size: 0;
    line-height: 0;
    
    &:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
}

А для всех потомков первого уровня так:

> div {
  display: inline-block;
  vertical-align: top;
}

Я думаю, что понятно описал решение. Спрашивайте если что. =)

P.S. А чтобы выровнять по левому краю, то text-align: left, :after - удаляете, а для потомков ширину в %. Можно и в случае с justify задать ширину дочернего блока в %.