HTMLで、ある横並び要素の高さを揃えるということをjQueryを使って実装しようと思います。単純に横並び要素を実装するにはdisplay: table-cell;を指定すれば実現できることは周知のことだと思います。しかし、多数の行数に渡る場合、その要素がお互いに揃えられるところまでは万能ではありません。そこで、簡単にその要素の高さを揃えることができるようなサイトを作っていきます。

前提コード

前提となるコードを書いていきます。

<div class="wrap">
	<div class="height" id="content-1">
		左側
	</div>
	<div class="height" id="content-2">
		右側<br /><br /><br /><br /><br /><br /><br /><br />最後
	</div>
</div>

#wrap {
	width:100%;
}

#content-1 {
	float:left;
	width:250px;
	padding:10px;
	background-color:#1ABC9C;
	display: table-cell;
}

#content-2 {
	margin-left: 250px;
	position:relative;
	width:4000px;
	background-color:#2F2F2F;
	display:table-cell;
	padding:10px;
	color:#ffffff;
}

これだけでは、各要素が横並びになるだけで、高さが揃うことはありません。これから.heightで指定した要素の高さを揃えていきます。

jQueryのコード

$(function() {
	var maxHeight = 0;
	$(".height").each(function(){
		if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
	});
	$(".height").height(maxHeight);
});

やっていることは単純で、各要素の高さを取得して、一番高いやつを適用するというだけです。そこら辺に高さを揃える系のプラグインがたくさん存在しますが、簡単に揃えるのならこの程度でできるので、簡単です。

投稿者プロフィール

yoshipc

コンピューター関連を得意としています。PHPが専門です(尚、技量はお察し)。よろしくお願いいたします。

最新の投稿

一覧

• 2018.09.01AMD動画エンコードでGPUを活用する
• 2018.03.26phpツイートIDからsnowflakeを用いて投稿時刻のミリ秒を算出
• 2018.02.18phpphpMyAdminのインストール方法(Ubuntu)
• 2018.01.07未分類新聞を折らずに郵送する方法