Как выровнять div блоки по высоте

Как выровнять div блоки по высоте

Все веб разработчики рано или поздно сталкиваются с проблемой выравнивания блоков по высоте, а именно с тем, как выровнять div блоки с текстами в них. Для ясности приведу такой пример: допустим секция вашей страницы состоит из 4-х блоков, в которых расположен текст, причем длинна текста в каждом из них колеблется от 40 до 120 символов, и необходимо их сделать равными вне зависимости от количества текста.

По ширине блоки можно выравнять выставив равное значение width в % либо используя адаптивную сетку из bootstrap.css, при этом блоки примут совершенно разный размер по высоте, что ощутимо испортит внешний вид страницы!

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

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

И так, как это выглядит, у нас 4 блока, длинной по 25%, то есть по ширине они одинаковы:

.block {width:25%}
1
2
3
4

ЗАДАЧА: выровнять div блоки по высоте адаптивно и с различном содержанием текста в них.

Для решения вопроса, необходимо скачать и подключить крошечный js-модуль equal.js, добавив следующее в заголовке, после строки подключения модуля jquery.js

Если кому, не очень нравится использовать огромный модуль bootstrap со всеми его прелестями, предлагаю скачать небольшой grid.css, который вполне сгодится для создания адаптивных блоков или адаптивной сетки.

Создавать блоки можно по тому же принципу, что и с bootstrap.

Подключаем grid.css.

Создаём 4 блока с помощью сетки grid.css.

текст
текст
текст
текст

Теперь добавим к каждому класс «equal».

текст
текст
текст
текст

И наконец, добавим функцию, с помощью которой можно будет выровнять div’ы по высоте, дописав в конце html документа, перед тегом </body>, следующий код.

загрузить equal.js

Посмотреть работающий пример можно здесь.

Ну вот и всё, блоки по высоте выравнены, причем адаптируются к размеру экрана. Можете изменить размер окна браузера и обновить страницу с примером.

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

Надеюсь Вам поможет это решение.

Автор статьи: Alec Morty

Loading Likes...

МАТЕРИАЛЫ ПО ТЕМЕ

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *