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

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

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)

  • やす | 2015.05.07 13:36

    リスト横並びの高さがずれるのをどうにかしたく、javascript苦手で困っていたところ、こちらにたどりつきました。大変たすかりました。ありがとうございました。

  • BlackFlag | 2015.05.08 0:18

    >やすさん
    コメントありがとうございます。
    当記事の高さ揃えスクリプトがお役に立ったようで
    嬉しく思っております。

    他にもいろいろと紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでリストなどの高さが違う複数の要素のheight値を揃える方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner