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

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


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

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

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

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

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

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

Другие публикации

Мой блог снова активизировался. На этот раз я выкладываю платные версии одного из самых необходимых для WordPress плагина совершенно бесплатно.

10.11.2015

Давно не писал в блоге, уже 3 месяца руки не доходят обновить ни портфолио, ни бложе мой. За этот период ничего в сайтостроеннии кардинально не поменялось. Ранее тут же я писал о том, как забацать нестандартный шрифт у себя на сайте, но статью написал очень сыро

25.03.2016

Углы любого элемента на странице можно закруглить, благодаря добавлению в CSS свойства border-radius. Чтобы облегчить процесс подбирания необходимого угла закругления элементов предлагаю вам пользоваться предложенным сервисом.

13.11.2014

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

Представляю вашему вниманию пожалуй самые необходимые аддоны для WordPress и плагина Advanced Custom Fields совершенно бесплатно, как мы любим. Repeater, Gallery и Option Page.

05.04.2015