この記事は2年以上前に書かれた記事です。現状にそぐわないかもなのでご注意を。

[Fack IE] 複数カラムの高さを揃えるjQueryプラグイン

テーブルレイアウトっぽいレイアウトって人気ありますよね。
コーディングもするデザイナーさんでもそういったグリッド風デザインを作ってきたりします。

これ、面倒なんですよね。テーブル使わずにコーディングするの。

display: table-cell

が使えればどんなに楽なことか。
Fack IE!!

Microsoftは 古いIEにはどぎつい警告が1時間に1回自動表示されるようにして欲しい。
(Wordpressの管理画面にIE6でアクセスすると出る真っ赤なアレみたいな)

さて本題。
複数カラムの高さを揃えるJSを使うのも久しぶりなので、もっと便利なJSがないか探してみました。

あったー。

jQuery Auto Height – 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW.

いつもお世話になってます>かたつむりくんwww。

このJSの便利なところはこれ。

セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる(1行ごとにそろえられる)

カラムブロックに余計なクラスを設定しなくてもOK!
膨大な数のカラム、複数パターンのデザインのブロックを3カラムごとに高さを揃えたい!なんて場合でもヘッダーに書くJSは1行でいけます。

例えばこんな感じで。

$(‘.boxtype-1,#special-wrap li’).autoHeight({column:3});

スポンサーリンク