＜li＞リストや連続したブロック要素を並べる際に、
中に入る要素の内容によって、個々の高さがまちまちになってしまった場合、
高さが揃わないことで、レイアウトを整えるのが意外と面倒になったりします。
そんな際に使える、jQueryを使っての、
連続した要素の高さを（最大値に）揃える方法を紹介してみます。
サンプルはfloatで横に並べた＜li＞リスト要素の高さを揃えるやり方。
まずはHTMLから。
◆HTML <ul> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> </ul>
単純なリスト構成で、中身はダミーテキストですが
それぞれ量を変えて高さをバラバラにしてあります。
これに対してCSSは以下。
◆CSS
ul {
margin: 0 auto;
width: 500px;
text-align: left;
}
ul li {
margin: 0 10px 10px 0;
width: 150px;
float: left;
border: #ccc 1px solid;
display: inline;
}
ul li p {
padding: 10px;
}
ここまでのHTMLとCSSはあくまでサンプル用のソースなので
特に重要な項目はありません。
そして、これらの表示するリスト要素の
高さを揃える為のスクリプトは以下になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul').each(function(){
var rep = 0;
$(this).children().each(function(){
var itemHeight = parseInt($(this).css('height'));
if(itemHeight > rep){
rep = itemHeight;
};
});
$(this).children().css({height:(rep)});
});
});
</script>
＜ul＞に対しての子要素＝「＜li＞」 の高さをそれぞれループさせる要領で見て
その中の最大値を全ての＜li＞に設定しています。
これを実際に表示すると以下の様になります。
jQuery SAME HEIGHT
別枠表示は以下から。
≫jQuery SAME HEIGHT
＜li＞の中の一番高さが大きい物に
全て高さが揃っています。
このサンプルでは、
＜ul＞～＜li＞のリスト要素に対して高さを揃えましたが、
親要素と子要素の構成が保たれていれば
他のタグでの構成でも使うことができます。
連続する要素の高さを揃えたいときに是非。。。