HTMLサイトを構築する際によく使う機能をまとめて、HTMLに１行追加するだけで以下のような様々な機能を追加できる、ライブラリ「SimpleLib」を公開しました。

詳しくはこちらから
http://lab.starryworks.jp/js/simplelib/

以前の細かいオプションを廃止し、高さを揃えたい要素たちの親要素に「fixHeight」というクラスを付与すれば、行ごとのグループを自動で判断して高さを揃えてくれます。

jQueryプラグインの形にしたので、$("selector").fixHeight();として呼び出すこともできます。

なお、以前のバージョンと互換性はありませんのでお気をつけください。

fixHeight.jsはSimpleLibのプラグインとしても提供しています。SimpleLibの他のエフェクトやプラグインなどと併用する場合は、SimpleLibに同梱されているものをご利用ください。
http://lab.starryworks.jp/js/simplelib/

ダウンロード

以下のリンクからダウンロードできます。
fixHeight-v2.0.js.zip(2KB)

※2010年10月5日追記
子要素のグループ分けで、子要素に複数のクラスが付いている場合に正しく動作しない不具合があったので修正しました。

設置方法

jQueryと「fixHeight.js」を読み込みます。

<script type="text/javascript" src="（環境に応じたパス）/jquery.js"></script>
<script type="text/javascript" src="（環境に応じたパス）/fixHeight.js"></script>

使用方法その1. 直属の子要素の高さを同じにする

高さを揃えたい要素の直属の親要素に「fixHeight」というクラスを付けます。
全ての直属の子要素の高さが、行ごとのグループ（Y座標が同じ要素のグループ）で、それぞれ一番高い要素と同じ高さに合わせて設定されます。

サンプル

中身のテキスト量に関わらず、DIV要素（濃いグレーの部分）の高さが行ごとに揃えられます。

ソース

<div class="fixHeight clearfix">
	<div>
		<strong>タイトル</strong>
		<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong>長めのタイトルです</strong>
		<p>ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong>長〜〜〜〜〜〜〜いタイトルです</strong>
		<p>ダミーテキストです。</p>
	</div>
	<div>
		<strong>タイトル</strong>
		<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong>長〜〜〜〜〜〜〜いタイトルです</strong>
		<p>ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong>タイトル</strong>
		<p>ダミーテキストです。</p>
	</div>
</div>

使用方法その2. 高さを揃えたい子要素を指定する

「fixHeight」クラスを付けた要素の直属の子要素ではなく別の子孫要素の高さを揃える場合は、その要素に「fixHeightChild」というクラスを付与します。

サンプル

DIV要素（濃いグレーの部分）の高さではなく、「fixHeightChild」クラスを付与したタイトル部分（下線の付いてるところ）の高さが揃えられます。

ソース

<div class="fixHeight clearfix">
	<div>
		<strong class="fixHeightChild">タイトル</strong>
		<p>ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChild">長めのタイトルです</strong>
		<p>ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChild">長〜〜〜〜〜〜〜いタイトルです</strong>
		<p>ダミーテキストです。</p>
	</div>
</div>

使用方法その3. 高さを揃えたい子要素をグループ化する

高さを揃える子要素をグループ化したい場合は「fixHeightChild○○○」（○○○は任意の文字）といった形で「fixHeightChild」に続いてクラス名として使用できる任意の文字を追加してグループごとにクラスを付与します。
例）fixHeightChild1, fixHeightChild2, fixHeightChildTitle, fixHeightText 等

サンプル

「fixHeightChildTitle」クラスを付与したタイトル部分（下線の付いてるところ）と、「fixHeightChildText」クラスを付与したテキスト部分の高さがそれぞれ揃えられて、結果的にDIV要素（濃いグレーの部分）の高さも揃っています。

ソース

<div class="fixHeight clearfix">
	<div>
		<strong class="fixHeightChildTitle">タイトル</strong>
		<p class="fixHeightChildText">ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">長めのタイトルです</strong>
		<p class="fixHeightChildText">ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">長〜〜〜〜〜〜〜いタイトルです</strong>
		<p class="fixHeightChildText">ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">タイトル</strong>
		<p class="fixHeightChildText">ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">タイトル</strong>
		<p class="fixHeightChildText">ダミーテキストです。</p>
	</div>
</div>

ライセンス

MITライセンスです。個人でも商用でも無料で利用可能です。
このスクリプトの利用により直接的または間接的に生じたいかなる損害に関しても、その責任を負いません。
バグなど発見された場合は、是非コメントください。