HOME > jQuery > 要素の高さを揃える「jquery.heightLine.js」

要素の高さを揃える「jquery.heightLine.js」

要素の高さを揃えるのは、flexで実装できることが多かったので、いままで「jquery.heightLine.js」にお世話にならずにやってきたけれど、今回はカルーセル(slickスライダーで実装)との合わせ技となったので、flexは使えず、とうとう「jquery.heightLine.js」デビューとなった。

使い方

レスポンシブに対応したものが公開されています。

レスポンシブWebデザインに対応した「jquery.heightLine.js」 – to-R

query.heightLine.jsをダウンロードして、jQueryと共に読み込ませる。

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../jquery.heightLine.js"></script>

高さを揃えたい要素をセレクタで指定して実行する。

$(".box0>div").heightLine();

実行部分は、レスポンシブ対応以前の「heightLine.js」と違っているので注意。「heightLine.js」は高さを揃えたい要素にクラス名heightLineを書いていた。

参考サイト