要素の高さを揃えるのは、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を書いていた。