@MRcracker

Как можно решить вопрос с высотой блока?

Есть карточка. У нее есть заголовок и область контента. Нужно сделать так, чтобы контент и заголовки растягивались в зависимости от контента соседней карточки и были на одном уровне. Думал, что можно решить задачу на flexbox, но не могу понять что делать с заголовками.
Подскажите, как решается подобный вопрос?

6089d298a00ff425791236.png
  • Вопрос задан
  • 157 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
На стилях такое можно сделать, если разделить составляющие блоков на элементы и расположить их внутри гридовой сетки на dense. Тогда заголовки по строке будут зависеть от других заголовков, текстовое описание от других и т.д. Увы этот метод сложный и попахивает бредом.

Более разумно будет не пытаться проводить такую манипуляцию, или захардкодить высоту заголовка в две строки (лучше в одну). Или же прибегнуть к JS, который будет динамически высчитывать размер наибольшего заголовка в строке и соседним выдавать такую же фиксируя её. Вроде есть либа такая.

Минус хардкода размера заголовка в том, что если в ряду будут все в одну строку, то появится необоснованное пространство снизу, а JS при большом числе карточек нагрузит вычислительные мощности устройства.

Еще можно подождать, пока войдет в реализацию subgrid. Но с этим пока сложно.
Ответ написан
Комментировать
FeST1VaL
@FeST1VaL
Тихий
Как то так... Можно конечно еще сделать проверки на соседние элементы и брать их высоту... а не всех, но думаю суть ясна...Просто тогда надо смотреть на ширину list и ширину item и высчитывать сколько помещается) и тогда понимать кто соседский элемент... мне лень)

Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kirbi1996
@kirbi1996
Можно сделать флексами. Что то типа общего контейнера с классом row. И затем уже твои квадраты делаешь column внутри два дива.
Ответ написан
Ваш ответ на вопрос

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

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