JavaScriptで要素の高さを揃えてみよう

JavaScriptを使って、要素の高さを揃えてみよう!

要素ごとに内容が違うと、デザイン上見場和えがよくありません。そこで、各要素の高さを取得して、もっとも高さのある要素に高さを揃える方法をご紹介いたします。
↓以下が実際のソースサンプルです。
▼JavaScript

$(function(){
	var h = 0;
	$("main div").each(function(){
		if($(this).height() > h){
			h = $(this).height();
		}
	});
	$("main div").css("height", h + "px");

});

▼CSS


▼HTML

サンプル

People are illogical, unreasonable, and self-centered.
Love them anyway.

If you do good, people will accuse you of selfish ulterior motives.
Do good anyway.

If you are successful, you will win false friends and true enemies.
Succeed anyway.

The good you do today will be forgotten tomorrow.
Do good anyway.

Honesty and frankness make you vulnerable.
Be honest and frank anyway.

The biggest men and women with the biggest ideas can be shot down by the smallest men and women with the smallest minds.
Think big anyway.

People favor underdogs but follow only top dogs.
Fight for a few underdogs anyway.

What you spend years building may be destroyed overnight.
Build anyway.

People really need help but may attack you if you do help them.
Help people anyway.

Give the world the best you have and you'll get kicked in the teeth.
Give the world the best you have anyway.

今回、参考にさせていただいたのは、
『LUTCHE』さんです。
ありがとうございます。

デモページは、こちら