В процессе работы столкнулся с интересной задачкой. Нужно было выровнять несколько блоков по одной высоте, но с разными входными данными. Понятно, что CSS тут не поможет, поэтому пришлось написать функцию на jQuery, которая решает эту задачу.
Сложность была в том, что нужно выровнять 4 блока в одном контейнере, а потом по этой высоте выровнять еще 2 блока. Изначальная высота блоков не известна, поэтому приходится, что называется, плясать от печки. Вот скриншот, чтобы было понятно (кликабельно):
Результатом решения стала функция на jQuery:
function setEqualHeight(blocks, etalon, correction){
blocks = $(blocks);
if ( blocks.length > 1 ) { // Проверяем наличие блоков
var tallest = 0;
blocks.each(function(){ // Проходим по всем блокам и находим самый высокий
var height = $(this).outerHeight(true);
if (tallest < height) tallest = height;
});
if (etalon && tallest < etalon) { // Сравниваем с эталоном
result = etalon;
} else {
result = tallest;
}
if (correction) result = result + correction; // Подгоняем
blocks.height(result); // Выравниваем
}
}
Опишу входные параметры:
- blocks — селекторы блоков, которые нужно выровнять
- etalon — высота блока, с которым нужно сравнивать результат
- correction — значение коррекции, при сложной верстке можно простым подбором подогнать нужное значение, может получать отрицательное значение
Примеры вызова функции:
setEqualHeight('#tabbed .box');
setEqualHeight('.report', $('#tabbed').outerHeight(true), -50);
Если данное решение вам понравилось, интересно узнать ваше мнение или критику.
Встречал подобное в некоторых «журнальных» wp-темах.
Спасибо, мб пригодится.
Пригодился уже, спасибо
>>Понятно, что CSS тут не поможет, поэтому пришлось написать функцию на jQuery, которая решает эту задачу.
а табличка, не?..
Не
Слишком много лишнего кода, вот написал плагин.
$.fn.equalHeight = function () { var max = Math.max.apply(this, this.map(function() { return $(this).innerHeight(); })); return this.each(function () { $(this).height(max - parseFloat($(this).css('paddingTop')) - parseFloat($(this).css('paddingBottom'))); }); }