Одинаковая высота у всех блоков (div, li) на jQuery
X
Заказать сайт
Заказать сайт

Одинаковая высота у всех блоков (div, li) на jQuery

3213123

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

В итоге, чтобы решить эту проблему, в лучшем случае используются методы overflow: hidden; вместе с заранее заданной высотой. За счет этого - то, что не вмещается в эту высоту просто обрезается. В принципе, этот способ вполне рабочий, и его можно использовать, чтобы обрезать картинки разного размера и даже длинные текста в блоках. Но рассмотрим более цивилизованный метод. Он позволит автоматически подогнать высоты любых блоков под один размер. Код скрипта вы можете скачать ниже.

Он реализован в виде функции blockmaxheight, в которую вы должны поставить идентификатор тегов, которые должны стать одинаковой высоты. Скрипт ищет среди них самый высоких и применяет его высоту ко всем остальным блокам. Таким образом, все элементы становятся одинаковыми по размеру. Это можно увидеть по примеру выше, где высота всех .bl2 div-ов равна высоте второго блока.

Особенностью функции является ее универсальность. Вы можете выравнивать любое количество блоков на своем сайте, установив только селектор. Например:
blockmaxheight("li"); //выровнять по высоте все li на сайте
blockmaxheight("div.pro"); //выровнять по высоте все div-ы с классом .pro

Не забудьте, что для скрипта потребуется подключить jQuery библиотеку. Надеюсь с его помощью вы сделаете свой сайт более красивым.

| | Одинаковая высота у всех блоков (div, li) на jQuery | В html верстке дизайнеры часто сталкиваются с проблемой разной высоты блоков, например, в превью товаров, столбиках с преимуществами и другими элемент | https://blogprogram.ru/wp-content/uploads/2016/07/3213123-131x131.jpg