ellsif blog

愛知のフリーランス プログラマのメモ書きなど

高さが不揃いなタイルレイアウトの下端をそろえる(JS)

divの高さを揃えるというのはよく見かけますが、今回やりたいのは、

WS000000これを

WS000001こうする。

ということです。
一番高い列との差分を各エリアに等分して、下部のラインを揃えています。

JavaScript(+jQuery)で対応してみました。
動作サンプルはこちら。
サンプル

JS本体は以下(※jQueryが必要です)
heightfix.js

使い方

サンプルのHTMLのままですが、jsを読み込んで、親要素と子要素のセレクタを指定するのみ。

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="heightfix.js"></script>
  <script>
      $(document).ready(function(){
        el.heightfix('.parent', '.child');
      });
  </script>
</head>

コメント

コメント
名前
ウェブサイト

*