كيف يمكنني الاحتفاظ متعددة DIVs نفس الارتفاع باستخدام jQuery ؟

Question

لدي بعض DIV الكلمات الدليلية مع كميات مختلفة من محتوى النص.

HTML:

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

إنهم في اثنين من تخطيط والعرض على السائل:

CSS:

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

أريد لهم كل نفس الارتفاع.

لذا حلقة من خلالها والعثور على ارتفاع أطول واحد.ثم حلقة أخرى تعيين كل منهم إلى هذا الارتفاع.

مسج:

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

هذا يعمل بشكل جيد إذا كان ارتفاع div لا تحتاج إلى تغيير مرة أخرى.

ولكن يفشل إذا كنت تغيير حجم نافذة المتصفح:

1. إذا كنت (أ) جعل المتصفح الأوسع ، ثم (ب) ، DIVs على نطاق أوسع ، ثم (ج) النص المحتوى يلتف عدد أقل من مرات ثم (d) بلدي DIVs طويل جدا

2. إذا كنت (ب) تجعل المتصفح أكثر ضيقا ، ثم (ب) بلدي DIVs على أضيق ، ثم (ج) نص المحتوى يلتف أكثر ، ثم (د) بلدي DIVs قصيرة جدا.

كيف يمكنني سواء (1) تلقائيا حجم DIVs إلى ارتفاع محتواها مثل العادية ، ولكن أيضا (2) الحفاظ على تلك متعددة DIVs نفس الارتفاع ؟

Answer 1

التحديث...تماما إعادة كتابة هذا الرد بعد تجريب وإيجاد أخرى ، على ما يبدو طريقة عملية للقيام بذلك:

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

شيء واحد أنا لاحظت أن أي حقا التقريب مشاكل مع 50% واسعة طرحت divs...التقديم كان أفضل بكثير لو غيرت تلك إلى 49%.

هذا مسج يعمل...

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
    var currentWidth = $(window).width();
    if (previousWidth != currentWidth) {
        doAdjust = true;
    }
    previousWidth = currentWidth;
})

// every half second

$(function() {
    setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
    if (doAdjust) {
        adjustBoxHeights();
        doAdjust = false;
    }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        $(this).height('auto');
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
}

Answer 2

بالنسبة للآخرين الذين مثلي ، جئت إلى هنا من خلال البحث في جوجل عن حل:القبضة جزء من الإجابة المقبولة يعمل فقط عند أول div أعلى.لقد جعلت بعض التغييرات على ذلك والآن يبدو أن العمل في جميع الحالات.

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

Answer 3

تحقق من هذا البرنامج المساعد مسج التي تسمح لك لمراقبة خاصية CSS مثل الارتفاع.

Answer 4

إذا كنت تريد أن تعمل عند تغيير حجم الخ...تفعل ذلك من هذا القبيل:

function sortNumber(a,b) {
    return a - b;
}

var highest = 0;

function maxHeight() {
    var heights = new Array();
    $('.equalheight div').css('height', 'auto');
    $('.equalheight div').each(function(){
        heights.push($(this).height());
    });        
    heights = heights.sort(sortNumber).reverse();
    highest = heights[0]; 
    $('.equalheight div').css('height', highest);
}

$(document).ready(maxHeight);
$(window).resize(maxHeight);

Answer 5

وجدت هذا الحل إلى أن يكون قليلا أكثر مرتبة على وضعي.يعمل بغض النظر عن شعبة هو أعلى.استنادا إلى هذا العمر كريس Coyier وظيفة في CSS الحيل.

function maxHeight() {
    var maxHeight = 0;
    $(".container > .post-box").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(".container > .post-box").height(maxHeight);
}

$(document).ready(function() {
    maxHeight();
}

$(window).bind('resize', function () {
    $(".container > .post-box").css('height', 'auto');
    maxHeight();
}).trigger('resize');

ومع ذلك ، لم تحتاج إلى ضبط ارتفاع لصناعة السيارات في تغيير الحجم قبل تشغيل الدالة مرة أخرى.لم أكن في حاجة إلى تعيينها في وظيفة الأصلي لأنه كان في css.