JQuery як задати блокам висоту найбільшого з них
Все про самостійне створення сайту
Ось як виглядають наші блоки, без застосування jQuery:
Для того, щоб вирівняти блоки, нам необхідно:
1. Знайти висоту найвищого блоку. 2. Встановити знайдене значення для всіх блоків.
В результаті вийшов такий jQuery код:
Внаслідок виконання написаної функції у нас вирівнялися всі блоки:
Post navigation
16 thoughts on “ jQuery як вирівняти блоки по висоті? ”
з першого разу вийшло.
А за приклад компактного написання, окреме дякую
Ну нарешті я знайшов його! Такий потрібний скрипт. ВЕЛИЧЕЗНЕ Дякую, ви мій рятівник!
Величезне будь ласка, радий, що зміг вам допомогти 🙂
Чи можна використовувати цей скрипт для вирівнювання вкладених блоків? Т. е. якби в даному прикладі перед кожним списком був блок із фото і потрібно було б вирівняти по висоті тільки ці блоки, а списки залишити різної висоти.
Цей скрипт можна використовувати для будь-якого набору елементів
Добрий як зробити, щоб функція спрацьовувала при зміні ширини екрана? наприклад, використовуючи jQuery(window).load(function() ? >); jQuery(window).resize(function () ? >); не сильний у jquery, дякую
Ви можете викликати цю функцію так, відразу для двох подій: $(window).on('load resize', function () < //ваша функція >); або ось так $(window).on(“resize”, function () < //ваша функція >).resize();
Дякую. Шикарне рішення, одразу все вийшло. За чистоту коду та компактність окрема вдячність!
Допоможіть будь ласка! у мене блоки знаходяться в слайдері і він їх відповідно клонує, а тому що мизадаємо максимальну висоту по першому блоку то виходить повна нісенітниця ((((((( Можна зробити так що б максимальна висота відстежувалася по блоках спочатку . Заздалегідь велике спасибі)))))))))
Знайшов свою помилку. у мене були зовнішні відступи які цей скрипт не рахував, тому виходила дурниця! ось як вирішив свою проблему: $.fn.equivalent = function() var $blocks = $(this); $blocks.each(function() maxH = ( $(this).outerHeight() > maxH ) ? $(this).outerHeight() : maxH; >); $blocks.outerHeight(maxH); > $('.block').equivalent();
Радий, що все вийшло 🙂
Привіт, дякую за це компактне та елегантне рішення, використав щоб поправити стандартну бутстраповську карусель. Особливе дякую за велику червону кнопку.
Скажіть, якщо блоки в одному ряду не помістилися і займають кілька рядів. І при зменшенні/збільшенні ширини екрана кількість цих рядів теж буде більшою/меншою. Тобто заздалегідь розбивати їх на ряди не можна. У першому ряду, наприклад, максимальна висота блоків 100px, у другому – максимальна висота 200px, у третьому – 300px. Виходить, що всі вони матимуть висоту 300px? Чи можна зробити так, щоб висота вирівнювалася не для всіх блоків, а окремо для кожного ряду? Звісно ж з урахуванням того, що при ресайзі сторінки кількість цих рядів буде більшою/меншою?