JS скрипт для выравнивания блоков по высоте

Часто сталкивался при верстке с проблемой выравнивания блоков по высоте.

Например, такая ситуация может возникнуть при выводе витрины товаров в виде плитки, когда заголовок товара высотой то 1 , то 2, то 3 строки.

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

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

Для работы этого скрипта требуется Jquery. Поэтому этот код должен идти после подключения библиотеки Jquery.

JS код выравнивания высоты блоков по большему элементу

Соответственно, чтобы скрипт знал какие блоки выравнивать — надо контейнеру с блоками добавить класс .equalheight
Например, код блоков такой:

Конечно оформление блоков на вашей совести, js скрипт только высоту выравняет по большему элементу.

Еще хочу обратить внимание, что скрипт будет выравнивать блоки во всех контейнерах с классом  .equalheight .

В результате должно получиться так:

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

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

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