Höhe von 3 Elementen, die größten Wert, über mehrere Zeilen

Question

Ich habe ein Layout von Divs alle links schwebend, mit einer Anzahl von 3 Spalten. Innerhalb dieser Schichten ist Text mit unterschiedlicher Länge, so wie die Schichten auf verschiedenen Höhen sind und so nicht richtig ausgerichtet und auch nicht sehr gut aussehen, da die Grenzen nicht in der Höhe übereinstimmen.

Ich könnte eine feste Höhe für alle divs setzen, aber dies wird riesigen weißen Raum auf einigen Zeilen verlassen, so habe ich einige JQuery geschrieben, um den größten Wert aller divs zu nehmen und alle Höhen auf diese Höhe, so dass sie Linie richtig auf. Das Skript ist:

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 

Dies funktioniert gut, aber in der Konstruktion einiger Zeilen haben nur 1 Zeile Text und so wird es eingestellt, dass Reihe so groß zu sein wie die obere Reihe mit 5 Zeilen Text sagen.

Was ich versuche zu erreichen ist, habe es die ersten 3 divs nehmen, den größten Wert erhalten dann diese 3 div Höhen auf diesen Wert. Dann wiederholen Sie dies für die 4. bis 6. Div. Und so weiter (wie die Divs sind in Spalten von 3)

Ich kann eine wirklich langatmige Lösung mit $(".section-title").eq(2) tun, aber ich kann mir vorstellen, das ist kein idealer Weg, es zu tun.

irgendwelche Ratschläge

bearbeiten Beispiel einiger divs geschätzt (CSS im HTML nicht sichtbar ist, nur für das Beispiel):

<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

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 Versuchen: Fiddle

Answer 2

ok versuchen Sie dies:

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); 
      } 
     }); 
}