Урок: блоки одинаковой высоты на jQuery

Задача состоит в том, чтобы все блоки одного типа имели равную высоту.

Есть два правильных способа сделать блоки одинаковой высоты:

  1. Сделать блоки со свойством display: table-cell, а их родительский со свойством display: table;
  2. Воспользоваться .

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

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

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

Возьмем блоки из предыдущего урока.

Как видно блоки имеют разную высоту:


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

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

Вот как изменился HTML с учетом добавления класса к блоком, которые надо выровнять по высоте:

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

Функция определения большей высоты и установки значения высоты для элементов:



В данном примере используется входной параметр функции — selector, который должен содержать селектор, аналогичный тому, как мы пишем в CSS.

Поскольку мы хотим выровнять высоту только тех блоков, которые имеют класс child, то вызов функции будет выглядеть следующим образом.

Вызов функции выравнивания блоков по высоте:

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

Условие выполнения функции выравнивания блоков по высоте:

Высота блоков будет выравниваться, если ширина окна будет больше 300 пикселей.

Результат — блоки одинаковой высоты:


Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

"Урок: блоки одинаковой высоты на jQuery"

Вам будет интересно...

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