Одинаковая высота любых блоков, быстро, адаптивно и очень просто

Задача: сделать блоки одинаковой высоты, не используя таблицы, кучу лишнего кода. Чтобы было кроссбраузерно, просто и адаптивно.

Сейчас время Flat (плоского) дизайна, все ровное, одноцветное. На практике: дизайнер предоставляет макет, где нужно, чтобы некоторые блоки относительно друг другу всегда были одинаковы по высоте.

С виду — ничего сложного, верстальщики же сразу поймут, что это проблема и попробуют решить дивами, но будут ломать иногда голову. Короче, неважно, может вы и гуру, и у вас все прекрасно получается, тогда почитайте другие посты в моём блоге.

Я же хочу вам показать простой способ, который я применяю в некоторых проектах, думаю вам будет полезно хотя бы посмотреть и узнать метод.

Все строится на базе одного jQuery скрипта, под названием matchHeight. Официальную документацию можете почитать тут, скачаете здесь.

Теперь покажу, как его просто юзать. По сути div блокам, которые нужно выровнять по высоте нужно просто добавить атрибут data-mh.

<div class="left-col" data-mh="lcgroup">контент блока</div>
<div class="right-col" data-mh="lcgroup">контент блока</div>

В параметре data-mh, в кавычках указываете свою уникальную группу, просто придумываете одинаковое название для группы, высоту блоков которых нужно сделать одинаковой. Это всё, точка :)

Поделиться в социальных сетях
ВКонтакте
Facebook
WhatsApp
Telegram
Автор статьи
Метки
Выгодный хостинг
Хостинг Beget

Выгодная партнёрская программа! Верните на свой счёт 20% с любой суммы от оплаты хостинга Beget!

Новое в блоге

Добавить комментарий

Смотрите также

Watch now

Написать в мессенджер

Связаться с нами прямо сейчас!