Вопрос по height, layout, jquery, css-float – установить равную высоту на нескольких делениях

2

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

<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   ответов
0
EqualHeight.js - v1.0.1https://github.com/JorenVanHee/EqualHeight.js

ый режим, вот как использовать:

$(window).load(function() {
$('.wrapper div').equalHeight({responsive: true});});
0

$.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

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

1

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

Спасибо за вклад. Не знаю, если бы я сделал это особенно эффективным способом .. но это работает :) ugreen
1

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

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

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

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

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

Похожие вопросы