@Alex_8x

Как задать блокам одинаковую высоту?

Как синим блокам https://codepen.io/Foxmind/pen/dyPBYzR задать одинаковую высоту в зависимости от высоты самого большого из них?
На ум приходят два способа:
  1. Таблицы. Но как при использовании таблиц расположить колонки друг под другом на устройствах с маленьким экраном?
  2. С помощью JS или jQuery. Но хотелось бы обойтись без скриптов.
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
Нус, можно сделать 2 строки, где первая — флексы с заголовками, а вторая остальной контент. Тогда, правда, придется продублировать как минимум второй и третий для медиазапросов. В смысле, чтобы на мобилках было норм.

Или использовать гриды, просто разбить на блоки и давать порядок в зависимости от разрешения. Типа
grid-template-area: 'header_1 header_2 header_3' 'features_1 features_2 features_3'
на пекарне и
grid-template-area: 'header_1' 'features_1' 'header_2' 'features_2' 'header_3' 'features_3'
на мобилках. Зайти и с другой стороны, выдавая позицию в номерах. Грубо, но свойства есть, дальше поможет интернет. Но смотри поддержку браузерами, осел не вывозит гриды.

Да и таблицами на самом деле сделать можно. Главное обеспечить им адаптивность. Это реально, но геморроя больше, чем в подходах выше.

Так-то еще можно менять положение DOM-элементов с помощью JS в зависимости от разрешения, но кроме меня я не слышал, чтобы кто-то в здравом уме так делал.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
flex же
Ответ написан
natojezlo
@natojezlo
так что ли?
https://codepen.io/natojezlo/pen/yLNvbLV
или вы про заголовки?
Ответ написан
@Dolosweb
Просто задайте параметр min-height: нужна высота
если надо чтобы было не выше конкретной высоты - то overflow: hidden;
Ответ написан
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Я так понял, что данный прайс будет с ограниченным количеством элементов (3 штуки), поэтому можно вот так хакнуть через грид. Для узких экранов просто по медии менять арии и количество колонок.



Остальное, что внутри, как в примере ниже:

Ответ написан
Ваш ответ на вопрос

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

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