WEBデザイナーAkiの備忘録

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

2017.7.6 ,

floatでボックスを横並びにした際に、高さが異なるといびつな感じになったり、ひどいとカラム落ちしたりしますよね。 そんな時におすすめの「jquery.matchHeight.js」

設置方法

ダウンロード

まずは公式からダウンロードです。

jsファイル設置

jsファイル「jquery.matchHeight.js」を任意の場所に保存。
そのファイルへのリンクと実行コードをhtmlに記述。bodyの閉じタグの前が色々喧嘩しなくていいかも。

クラスをつける

高さを調節したい横並びのボックスに「matchHeight」というクラスをつけます。

これで中のボックスの内容量が変わっても、一番大きなボックスに合わせた高さに自動調節してくれます。うん、便利便利!

しかし最近は横並びといえばflexboxなどが主流なんでしょうか。あれそんなにいいか?なんか使いにくくね?と思うfloat派です。
だってflexboxってWidthをpx指定にしないと横に並ばないじゃないですかー。%で指定したいときが圧倒的に多いんですよね。

それともなにか方法があるのだろうか…レスポンシブ向きの横並びボックスのいい方法、随時模索中です。

コメント