Blog

高さを揃えるjQueryプラグイン「jQuery-fixHeightSimple」つくりました

商品の一覧ページなど、

違う長さの文字列が同列要素に入っている場合に、

高さを揃える必要が出てきたりすることはよくあります。

 

いつも高さを揃える関数を、少しずつ改良しながら使いまわしていたのですが、

形が落ち着いてきたのでjQueryプラグインにしてみました。

 

↓こちらがデモです

DEMO

 

↓「jQuery-fixHeightSimple」はこちらからダウンロードしてください

Download

 

使い方

1.HTMLでjQueryとjQuery-fixHeightSimpleを読み込んでください。

 

2.jQueryで対象要素にプラグインをあててください。

このようなhtmlで<li>の高さを揃える場合は次のように指定してください。

高さを揃える要素すべてを同じ高さにする場合はこれで高さを揃えることができます。

 

行ごとに高さを揃えたい場合は、オプションで列数を指定してください。

これで、行ごとに高さが揃います。

 

よろしければ、ご利用くださいませ。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ