2枚のカードと同じ高さにする方法私は黒アフリカの選手のために2枚のカードを作り、ホワイト選手のために同じ高さのすべてのそれらのカードが同じクラスを使用していることは、おそらくそれを同じ高さを作るための方法があることができますどのように

Question

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

、彼らが同じ行にある場合、あなたはその行にdisplay:flex;flex-direction:row;を使用することができますが、それらは、同じ行にない場合、あなたはjQueryを使ってそれを行うことができます。以下のスニペットは、同じ高さのclass="card"

$(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

ですべてのdiv要素を行いますフレキシボックスは、ここでは便利です。 3 <br>年代との最後の要素は、（他の二つよりも背が高いことに注目してください、まだ彼らはすべて同じ高さ：

* { 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>