установить равную высоту на нескольких делениях - PullRequest
Новая
       18

установить равную высоту на нескольких делениях

2 голосов
/ 18 марта 2010

Мне нужно установить одинаковую высоту для серии div внутри другой оболочки div. Проблема в том, что я не хочу одинаковую высоту на всех них. Тип страницы имеет 3 столбца, а плавающие div могут иметь ширину 1, 2 или 3 столбца. Divs плавают влево, поэтому следующий пример даст мне три ряда div в моей оболочке. Как я могу установить одинаковую высоту на div, которые находятся в одном ряду? В моем примере я хочу, чтобы nr 1 и 2 имели одинаковую высоту, а 3, 4 и 5 - другую равную высоту? Я не могу знать заранее, сколько там дел, или как они широки или высоки. Редактировать: Они могут быть, например, шириной 300, 600 или 900 пикселей и шириной страницы 900px 

<div id="wrapper">
 <div class="one-wide">nr1</div>
 <div class="two-wide">nr2</div>
 <div class="one-wide">nr3</div>
 <div class="one-wide">nr4</div>
 <div class="one-wide">nr5</div>
 <div class="three-wide">nr6</div>
</div>

Я думаю, мне как-то нужно выяснить, когда добавленная ширина div-ов равна полной ширине страницы, и установить равную высоту для них. Затем сделайте то же самое на следующих делах. Но я не могу обернуть голову вокруг этого. В настоящее время я просто использую это, чтобы установить высоту дочерних элементов оболочки: 

$.fn.equalHeights = function(px) {
$(this).each(function(){
    var currentTallest = 0;
    $(this).children().each(function(i){
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
    });
    // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
    $(this).children('div').css({'min-height': currentTallest}); 
});
return this;
};

Ответы [ 5 ]

1 голос
/ 18 марта 2010

Отслеживайте ширину и, когда они добавляются к общей ширине, затем изменяйте размер столбцов (отслеживайте, какие из них вы просматривали, ИЛИ, сколько может быть проще), а затем сбрасывайте переменную currentTallest. Таким образом, вы будете выполнять изменение размера внутри цикла каждый раз, когда достигнете конца строки.

1 голос
/ 18 марта 2010

Поскольку вы используете jQuery, используете ли вы плагин EqualHeights?

http://www.cssnewbie.com/example/equal-heights/plugin.html

Похоже, у вас есть логика, чтобы узнать, сколько div в строке, прежде чем перейти к ширине страницы, а затем начать новую строку div с ID. Затем позвоните 

$('#custom-id').equalheights();

столько раз, сколько вам нужно, и это должно установить для них одинаковую высоту для каждого идентификатора.

Вы также можете построить это, выполнив каждый элемент div для строки и добавив их ширину с помощью .width ().

0 голосов
/ 12 ноября 2018

этот легкий плагин даже поддерживает изменение размеров окон и режим реагирования вот как использовать: 

$(window).load(function() {
$('.wrapper div').equalHeight({responsive: true});});
0 голосов
/ 21 марта 2010

Я пошел с чем-то, как предложил Питер. Я переписал плагин для: 

$.fn.cleverHeights = function(px) {
$(this).each(function(){
    var currentTallest = 0;
    var width = 0;
    var row = new Array();
    $(this).children().each(function(i){
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        width += parseInt($(this).outerWidth(), 10);
        row[++row.length] = $(this);
        if (width > 900) {
            $.each( row , function() {
                $(this).css({'min-height': currentTallest});
                // for ie6, set height since min-height isn't supported
                if ($.browser.msie && $.browser.version == 6.0) { $(this).css({'height': currentTallest}); }
            });
            row.length = 0;
            width = 0;
            currentTallest = 0;
        }
    });
});
return this;
};

Спасибо за ввод

0 голосов
/ 18 марта 2010

Возможно, вы можете пройтись по div и проверить наличие $ (this) .offset (). Top Если offset (). Top не равен последнему смещению, вы знаете, что находитесь в другой строке.

...