Ustaw wysokość 3 elementów, przyjmując największą wartość, w wielu wierszach

Question

Mam układ elementów divs floating left, z liczbą kolumn 3. Wewnątrz tych warstw jest tekst o różnej długości, ponieważ takie warstwy są na różnych wysokościach a więc nie wyrównuje się prawidłowo, a także nie wygląda zbyt dobrze, ponieważ granice nie pasują do wysokości.

Mogę ustawić stałą wysokość dla wszystkich elementów div, ale pozostawi to ogromną białą przestrzeń w niektórych wierszach, więc napisałem trochę JQuery, aby pobrać największą wartość wszystkich elementów div i ustawić wszystkie wysokości do tej wysokości, aby były zgodne poprawnie. Skrypt jest:

var sectionheight = new Array(); //set empty array 
$(".section-title").each(function() { //get all div elements 
    var value = $(this).height(); //get div height 
    sectionheight.push(value); //write height to array 
}); 
var newsectionheight = Math.max.apply(Math, sectionheight); //get largest value in array 
$('.section-title').height(newsectionheight); //set height of all elements to largest 

Działa to dobrze, ale w projekcie niektóre wiersze mają tylko 1 wiersz tekstu, a więc jest dostosowanie że rząd będzie tak duża, jak powiedzieć górny wiersz z 5 linii tekstu.

To, co próbuję osiągnąć, to wziąć pierwsze 3 elementy div, uzyskać największą wartość, a następnie ustawić te 3 wysokości div na tę wartość. Następnie powtórz to dla od 4 do 6 div i tak dalej (jak divy są w kolumnach 3)

Mogę zrobić naprawdę długi rozwiać rozwiązanie z $(".section-title").eq(2), ale mogę sobie wyobrazić, nie jest to idealny sposób robienia tego.

Każda rada jest doceniana

Edit przykładem niektórych div (CSS nie jest widoczny w html, tylko dla przykładu):

<div style="width: 100%;"> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text and a longer title than the other rows</div> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text not as long</div> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">short text</div> 
    <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div> 
</div> 

Answer 1

Spróbuj

var $sections = $('.section-title'); 

$sections.filter(':nth-child(3n-2)').each(function() { 
    var $this = $(this), 
     $els = $this.nextAll(':lt(2)').addBack(); 

    var sectionheight = new Array(); 
    $els.each(function() { 
     var value = $(this).height(); 
     sectionheight.push(value); 
    }); 
    var newsectionheight = Math.max.apply(Math, sectionheight); 
    $els.height(newsectionheight); 
}) 

Demo: Fiddle

Answer 2

ok spróbuj tego:

function setHeight(){ 
     var max = -1; 
      // this will give you maximum height of your div 
     $(document).find('.test-div').each(function() { 
      var h = $(this).height(); 
      max = h > max ? h : max; 
     }); 
      // varible-div is the division whose height keeps changeing 
     $(document).find('.variable-div').each(function(){ 
      var presentHeight=$(this).parents('.test-div').height(), 
      difference=max-presentHeight; 
      if(difference > 0){ 
       $(this).height($(this).height()+difference); 
      } 
     }); 
}