Đặt chiều cao của 3 phần tử, lấy giá trị lớn nhất, qua nhiều hàng

Question

Tôi có bố cục các div nằm bên trái, với tổng số cột là 3. Bên trong các lớp này là văn bản có độ dài khác nhau, vì vậy các lớp ở các độ cao khác nhau và do đó không sắp xếp chính xác và cũng không trông rất đẹp vì các đường viền không khớp với chiều cao.

Tôi có thể đặt chiều cao cố định cho tất cả các div nhưng điều này sẽ để lại khoảng trắng lớn trên một số hàng, vì vậy tôi đã viết một số JQuery để lấy giá trị lớn nhất của tất cả các div và đặt tất cả các chiều cao đó. lên một cách chính xác. Kịch bản là:

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 

này hoạt động tốt nhưng trong việc thiết kế một số hàng chỉ có 1 dòng văn bản và vì vậy nó được điều chỉnh hàng đó là lớn như nói hàng đầu với 5 dòng văn bản.

Điều tôi đang cố gắng đạt được là có được 3 div đầu tiên, nhận giá trị lớn nhất sau đó đặt các giá trị 3 div đó thành giá trị đó. Sau đó lặp lại điều này cho div thứ 4 đến thứ 6 và như vậy (vì các div nằm trong các cột 3)

Tôi có thể thực hiện một giải pháp dài với $(".section-title").eq(2) nhưng tôi không thể tưởng tượng đây là cách lý tưởng.

Bất cứ lời khuyên được đánh giá cao

Sửa ví dụ về một số divs (css không hiển thị trong html, chỉ cần cho ví dụ):

<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

Hãy thử

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 hãy thử cách này:

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