Wie zwei Karten die gleiche Höhe machen

Question

Wie kann ich zwei Karten für Black African Spieler machen und für White Spieler die gleiche Höhe Alle diese Karten die gleiche Klasse wird verwendet, ist es vielleicht eine Möglichkeit, es die gleiche Höhe

zu machen

div.card { 
    overflow: hidden; 
} 

.card { 
    width: 100%; 
    padding: 9px 20px 9px 20px; 
    margin-bottom: 0px; 
    background: #ffffff; 
    box-shadow: 1px 1px 1px #dfdfdf; 
    box-sizing: border-box; 
    height: 100% !important; 

Answer 1

wenn sie in der gleichen Reihe sind, dann können Sie display:flex;flex-direction:row; auf dieser Zeile verwenden, aber wenn sie nicht in der gleichen Reihe sind, können Sie es mit jQuery tun. das Snippet unten wird jedes div mit class="card" gleicher Höhe machen

$(document).ready(function(){ 
    var maxHeight = 0; 
    for(i=0;i<$(".card").length;i++){ 
    if($(".card").eq(i)){ 
     var currentHeight = $(".card").eq(i).height(); 
     if(currentHeight>=maxHeight){ 
     maxHeight = currentHeight; 
     } 
    } 
    else{ 
     break; 
    } 
    } 
    $(".card").height(maxHeight); 
}); 

Answer 2

Flexbox hier kommt in handliches. Beachten Sie, wie das letzte Element (mit drei <br> ‚s ist größer als die beiden anderen, aber sie sind alle die gleiche Höhe:

* { box-sizing: border-box; } 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.card-wrap { 
 
    flex: 0 0 33.333%; 
 
    display: flex; 
 
    padding: 10px; /* gutter width */ 
 
} 
 

 
.card { 
 
    box-shadow: 0 0 4px rgba(0,0,0,0.4); 
 
    flex: 0 0 100%; 
 
}

<div class="container"> 
 
<div class="card-wrap"> 
 
    <div class="card"><br></div> 
 
</div> 
 
<div class="card-wrap"> 
 
    <div class="card"><br></div> 
 
</div> 
 
<div class="card-wrap"> 
 
    <div class="card"><br><br><br></div> 
 
</div> 
 
</div>