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

2017.7.6 JavaScript, jQuery

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

設置方法

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

<script type="text/javascript" src="js/jquery.matchHeight.js"></script>
<script>
$(function(){
　　$('.matchHeight').matchHeight();
});
</script>

$(function(){

　　$('.matchHeight').matchHeight();

});

</script>

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

<ul>
  <li class="matchHeight">テキストが入ります。</li>
  <li class="matchHeight">テキストが入ります。テキストが入ります。</li>
  <li class="matchHeight">テキストが入ります。</li>
</ul>

<ul>

<li class="matchHeight">テキストが入ります。</li>

<li class="matchHeight">テキストが入ります。テキストが入ります。</li>

<li class="matchHeight">テキストが入ります。</li>

</ul>

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

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

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