3 öğenin yüksekliğini ayarlayarak, en yüksek değeri alarak, birden fazla satır boyunca

Question

Tüm sütunları bir sütun sayısı 3 olan, soldaki tüm boşlukları olan bir düzenim var. Bu katmanların içinde farklı uzunluklarda olduğu gibi, bu katmanlar farklı uzunluktaki metinlerdir. ve bu yüzden doğru olarak hizalanmamakta ve sınırlar yüksekliğe uymadığından çok iyi görünmemekte.

Tüm div'ler için sabit bir yükseklik ayarlayabilirim, ancak bu bazı satırlarda büyük beyaz boşluk bırakacaktır, böylece tüm div'lerin en büyük değerini almak için tüm JQuery'leri yazdım ve tüm yüksekliklerini bu yüksekliğe ayarladım doğru şekilde yukarı script: Bu iyi çalışır ancak tasarımda bazı satırlar yalnızca metin 1 satır var ve yüzden metnin 5 satır ile üst satır dediğiniz gibi o satır kadar büyük olması ayarladığı

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 

.

Elde etmeye çalıştığım şey, ilk 3 divanı alması, en büyük değeri alması ve sonra bu 3 div yüksekliğini bu değere ayarlamasıdır. Daha sonra 4 ile 6 arasındaki div için bunu tekrarlayın (div'ler 3 sütununda olduğu gibi)

$(".section-title").eq(2) ile gerçekten uzun bir çözüm yapabilirim ama bunun ideal bir yol olmadığını hayal edebiliyorum.

Herhangi bir tavsiye bazı bölümlerde; (css sadece örneğin html görünmüyorsa) ait

Düzenleme örneği

takdir:

<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

deneyin

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

tamam bunu deneyin:

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