Одинаковая высота у блоков: jQuery
У вас на странице выводится три блока с новостями в одну строку. Но, как правило, у новостей всегда разной длины заголовки и размеры изображений. Через CSS сделать это довольно не просто, рассмотрим, как это просто делается через jquery
К примеру, без скрипта у вас выводится:
А подключив скрипт, получаем:
Работа скрипта:
Добавляем к родителю трёх блоков класс «inline»
<div class="inline"> <div>Новость 1</div> <div>Новость 2</div> <div>Новость 3</div> </div>
Вызываем скрипт
var timerId = setInterval(function() { maxH=0; $('.inline > div').each(function(i){ if ($(this).height() > maxH){ maxH = $(this).height(); } }); $('.inline > div').height(maxH); }, 100);
Скрипт сработает через 0.1 секунды после загрузки страницы, чтобы избежать конфликта с другими библиотеками, можете его убрать (удалите 1 и 8 строчку кода).
Оставить комментарий