<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>のリスト要素に対して高さを揃えましたが、
親要素と子要素の構成が保たれていれば
他のタグでの構成でも使うことができます。

連続する要素の高さを揃えたいときに是非。。。

サンプルファイルをダウンロードしたい方はこちらから