eq-height CSS oder JS mit inneren div/Klassen?

Question

Ich versuche, eine Methode eq-Höhe auf dieses Beispiel zu erstellen: https://codepen.io/anon/pen/opXmMG

<div class="row"> 
    <div class="col-lg-8"> 
    <div> class="box"> 
     <div class="box-head"> 
     <h2>Title</h2> 
     </div> 
     <div> class="box-body"> 
     <p>Lorem ipsum dolor sit amet</p> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="col-lg-8"> 
    <div> class="box"> 
     <div> class="box-head"> 
     <h2>Title</h2> 
     </div> 
     <div> class="box-body"> 
     <p>Second row</p> 
     <p>Second row</p> 
     <br> 
     </div> 
    </div> 
    </div> 
</div> 

Ich würde gerne wissen, welche die beste ist Verfolgung Praktiken bisher und was die sein sollte leistungsstärkste.

Und natürlich, es funktioniert. Weil ich im Moment nicht in der Lage bin, es zu tun.

Danke Jungs.

Answer 1

Am besten auf dem neuesten Stand der Technik können wir davon ausgehen, dass Sie nur die neuesten Browser unterstützen. Dann können Sie versuchen, CSS Flexbox-Eigenschaft zu verwenden und es leicht zu erreichen.

Wenn nicht müssen Sie die Tabellen und divs (mit dispaly: table -Eigenschaft) verwenden, vorausgesetzt, Sie haben feste Zeilen und Spalten für alle Bildschirmgrößen.

Answer 2

meine Lösung versuchen, ich habe eine allgemeine Methode implementiert zu tun, was neededo

https://codepen.io/anon/pen/QabRQP?editors=1010 ist

$(function(){ 
var HightGruplist = []; 
    $('*').each(function(index) { 
    if ($(this).attr("HightGrup")!=null){ 
     var TempGrup=$(this).attr("HightGrup"); 
     console.log(TempGrup); 
     var Found=false; 
     HightGruplist.forEach(function(item,index){if (item==TempGrup){ 
     Found=true; 
     }}); 
     if (!Found){ 
     HightGruplist.push(TempGrup); 
     } 
    } 
    }); 
    HightGruplist.forEach(function(item,index){ 
    console.log($('*[HightGrup='+item+']')); 
    $('*[HightGrup='+item+']').on('resize',function() { 
     var MaxHeght=0; 
     $('*[HightGrup='+item+']').each(function(index) { 
     if ($(this).height()>MaxHeght) MaxHeght = $(this).height(); 
     }); 
     console.log(MaxHeght); 
     $('*[HightGrup='+item+']').height(MaxHeght); 
    }); 
    }); 
}); 
$(function() {$('*[HightGrup]').resize();}); 

Sie müssen nur mit der Objektgruppen definieren

HightGrup="mygrup1" 

es

<div class="box-header accent" HightGrup="mygrup1">