例えば、次のようにカーンの内容の量が異なりカーンの高さがまちまちである場合カーンの高さを同じに調整したい場合があります。
<div class="container"> <div class="column">3줄<br />3줄<br />3줄</div> <div class="column">1줄</div> <div class="column">2줄<br />2줄</div> </div> <div class="container"> <div class="column">1줄</div> <div class="column">2줄<br />2줄</div> <div class="column">1줄</div> </div>
この場合、次のjQueryを使用してDivクラスがcontainerである要素の下のcolumnクラスの高さを同じように調整することができます。
$(document).ready(function(){ $('.container').each(function(){ var highestBox = 0; $('.column', this).each(function(){ if($(this).height() > highestBox) highestBox = $(this).height(); }); $('.column',this).height(highestBox); }); }); // Source: http://stackoverflow.com/
上では、各containerの下のcolumnクラスのみ同じ高さが適用されてcontainerごとに独立しています。 少し別の方法で同じすべてのクラスの高さを同じに調整するjQueryを考えてみることができます。 この場合は、次のようなjQueryコードを使用することができます。
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } $(document).ready(function(){ equalHeight($(".EqHeightDiv")); }); // Source: http://www.leonamarant.com/
このスクリプトを適用してみると以下のように同じすべてのクラスのDIVの高さが同じに調整されていることを知ることができます。
コメントを残す