JQuery等高度行

Question

我希望使用JQuery创建与div相同的高度和行。 我被卡住了！

关于如何使第一行等于第二行的任何想法？ 我发现了什么，我希望有一个例子在这里 ，当你取消勾选“通过行”的所有行相等。 只是不确定如何。

 jQuery(document).ready(function($) { equalheight = function(container){ var currentTallest = 0, currentRowStart = 0, rowDivs = new Array(), $el, topPosition = 0; $(container).each(function() { $el = $(this); $($el).height('auto') topPostion = $el.position().top; if (currentRowStart != topPostion) { for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } rowDivs.length = 0; // empty the array currentRowStart = topPostion; currentTallest = $el.height(); rowDivs.push($el); } else { rowDivs.push($el); currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest); } for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); } }); } $(window).load(function() { equalheight('.main article'); }); $(window).resize(function(){ equalheight(' article'); }); }); 

 .landingpage .main article { float: left; width: 29.33%; background: #ccc; margin: 10px 1%; padding: 1%; } @media all and (max-width: 800px) { .landingpage .main article { width: 100% } 

 <div class="landingpage"> <section class="main"> <article>CPR & AED Classes <BR>1 </article> <article>CPR & First Aid Classes</article> <article>BLS Classes<BR>1</article> <article>EMSA Pediatric Classes</article> <article>Instructor Training </article> <article>Water Safety<BR>1<BR>1</article> </section> </div> 

Answer 1

尝试这个

$(document).ready(function(){
    maxheight=0;
    $('.main article').each(function(){
        maxheight = $(this).height() > maxheight ? $(this).height() : maxheight;
    })
    $('.main article').height(maxheight);
});

这将使所有行高度与行的最大高度相同

工作实例