ブログ

jquery.matchHeight.jsで高さをそろえてみた

横並びの要素の高さがそろわないモヤモヤを解消してくれる

jquery.matchHeight.js

便利です。愛用してます。

使い方は簡単!

$(function() {
    $('.hoge').matchHeight();
});

高さをそろえたい要素に.hogeをつけるだけ!

当たり前すぎましたね。

並んでるものを違う高さで揃えたいときは?

横に並んでる要素を違う高さで揃えたい。

例えばこんなとき。

あるよね。

そんなときはデータ属性を使おう!

<div data-mh="group-1">Sample</div>
<div data-mh="group-1">SampleSampleSample</div>
<div data-mh="group-2">SampleSampleSampleSampleSample</div>
<div data-mh="group-2">SampleSample</div>

同じグループ名ごとに高さが揃えられます!

他にもいろんなオプションもあるので使いこなせると便利です。

jquery-match-height オプション