3つのdivのそれぞれの高さを最後の高さ/最長の高さに設定します

Question

私は左のdivに3つの浮動小数点を持ち、33.33％はそれぞれ異なる内容です。私はそれぞれの高さを同じにしたいと思っています。私は最初の2つのdivの高さを設定することを考えました。これはjavascriptで最後のdivの高さまで短くなっています。そのため、画面デバイスに応答し、モバイルとタブレットでは実行されません。

There divsはウェブサイトに価格表として表示されます。どのように私はそれを達成することができますの任意の提案？

Answer 1

使用flexbox：

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

.parent { 
    display: flex; 
} 

Answer 2

• 適切なセレクタを使用してすべてのターゲット要素を選択します。 .map
• を使用して、配列内のすべての要素の取得の高さ（.height()）は.height(NEW_HEIGHT)

$('button').on('click', function() { 
 
    var allH = $('.target').map(function() { 
 
    return $(this).height(); 
 
    }); 
 
    var maxH = Math.max.apply(null, allH); 
 
    $('.target').height(maxH); 
 
});

div { 
 
    float: left; 
 
    width: 33.33%; 
 
    background-color: green; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class='target'>1 
 
    <br> 
 
</div> 
 
<div class='target'>2 
 
    <br> 
 
    <br> 
 
    <br> 
 
</div> 
 
<div class='target'>3 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
</div> 
 

 
<button>Set Max Height</button>

を使用して、すべての要素の高さを設定 Math.max

を使用して、選択した要素から最大の高さを取得