@sriver
js newbie

Почему высота блока получается больше высоты дочерних блоков?

Собственно лучше посмотреть, что бы понять:
https://ru.whamisa.com/catalog/osnovnoy_ukhod/toner_na_osnove_tsvetochnykh_fermentov_nasyshchennyy_event_item/

У блока .card-item-wrapper внизу остается пустое пространство, хотя блоки внутри него заканчиваются раньше.
Причем размер этого пустого пространства зависит от количества контента в дочерних блоках (можно перейти к другим товарам, что бы убедиться в этом)
на мобильном все нормально, т.к. все блоки показываются в столбик.
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
Уберите для .card-item-wrapper .item-block display: inline-block;
В случае с css columns inline-block бессмыслен, да и еще и добавляет внизу отступ (есть такой нюанс при работе css columns с inline-block в некоторых версиях webkit браузеров).
А чтобы перенос происходил так, как у вас был с inline-block, добавьте breake-inside:
.card-item-wrapper .item-block {
    padding: 0 15px;
    margin-bottom: 1rem;
    max-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы