Задать вопрос
@sriver
js newbie
css

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

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

У блока .card-item-wrapper внизу остается пустое пространство, хотя блоки внутри него заканчиваются раньше.
Причем размер этого пустого пространства зависит от количества контента в дочерних блоках (можно перейти к другим товарам, что бы убедиться в этом)
на мобильном все нормально, т.к. все блоки показываются в столбик.
  • Вопрос задан
  • 91 просмотр
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
vadimkot
@vadimkot Куратор тега CSS
Уберите для .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;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Подключить сервер к сети
27 апр. 2024, в 02:39
1500 руб./за проект
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
Ещё заказы