jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.9.29

横並び要素の高さを揃える

Category:

基礎的なレイアウトをjavascriptに依存して、jsがオフになっている場合に見た目が崩れてしまうというのは個人的にあまり賛成できないですが、それでもjsに頼らなければ再現できないデザインに出くわすことがあります。横並び要素の一部高さを揃えるといったものも、その一例です。cssのdisplay:table-cell;を使用すれば解決できる場合もありますが、そうでないこともあります。

今回は書籍「jQuery逆引きマニュアル」の176ページのコードを引用し、処理全体を関数化して少しだけ汎用性を持たせてみました。
以下、そのコードになります。

function max_height(e,n){
	var	elm = $(e),
		row = n,
		row_cls = 'row',
		max_height = 0;

	elm.each(function(i){
		if(max_height < $(this).height()) {
			max_height = $(this).height();
		}
		$(this).addClass(row_cls);

		if(i % row == row - 1){
			$(e + '.' + row_cls).height(max_height).removeClass(row_cls);
			max_height = 0;
		}
	});
	$(e + '.' + row_cls).height(max_height).removeClass(row_cls);
}

//関数を呼び出して使う。引数にセレクタと列数を指定できるようにした。
max_height('.line01 p',5);
max_height('.line02 p',3);

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.