Все для создания и продвижения сайтов

Верстка, программирование, SEO

Одинаковая высота у блоков: jQuery

количество просмотров 842
Одинаковая высота у блоков: jQuery

У вас на странице выводится три блока с новостями в одну строку. Но, как правило, у новостей всегда разной длины заголовки и размеры изображений. Через CSS сделать это довольно не просто, рассмотрим, как это просто делается через jquery

К примеру, без скрипта у вас выводится:

Одинаковая высота у блоков: jQuery

А подключив скрипт, получаем:

Одинаковая высота у блоков: 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 строчку кода).

Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.