Как настроить отображение блоков в ряду одинаковой высоты?

Question

[ayapergenov]

На данном примере
пытаюсь настроить всегда одинаковую высоту блоков независимо от количества контента.
В первый блок добавил текста и блоки поехали. Добавил javascript который расчитывает длинну ориентируясь на самый высокий и подстраивает под него остальные, но при уменьшении экрана эта статичная гармония рушится и верхние блоки наезжают на ниже стоящие. Каким образом можно сделать этот код адаптивным и корректным при любой ширине экрана?
Нашёл еще одну библиотеку которая выравнивает блоки но при изменении размера экрана блоки все равно наезжают друг на друга так как выставлена ширина картинок width:100%.

Выложил код с проектом на поддомен

На сайте используется js плагин, который применяет новые высоты. Он считает высоты однажды только при первой загрузке страницы. Поэтому вызов функции надо определить в функции, которая срабатывает во время изменения размеров документа. Как это реализовать практически?

Answer 1

[AliasKarg]

Пробовали equalize method повесить на window resize event?

Comments

[ayapergenov]

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

[AliasKarg]

Подключаете тот плагин, который вы сами предложили.
И как-то так: $(window).resize(function () { $('#parent-node').equalize(); });

[ayapergenov]

Прописал так $(window).resize(function () { $('#row').equalize(outerHeight); });
Ничего. Когда прописывал $('.row').equalize('outerHeight'); то хотя бы статическое выравнивание происходило, а сейчас вообще ничего. Думал может проблема в классе .row поэтому добавил #row но и так ничего.