【matchheight jquery】横並び要素の高さを揃えられる便利なjQuery

こんにちは、ハル@haru_elpisです。

要素の高さを簡単に揃えて表示できる「matchheight」の紹介です。

matchheight jqueryの使い方

ダウンロード

GitHub - liabru/jquery-match-height: a responsive equal heights plugin

a responsive equal heights plugin. Contribute to liabru/jquery-match-height development by creating an account on GitHub.

github.com

ダウンロードした「jquery.matchHeight.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.matchHeight.js"></script>

HTML

<style>
ul li{
	float:left;
	background-color:#424242;
	width:23%;
	margin:0 1%;
	padding:10px;
	box-sizing:border-box;
	line-height:1.5rem;
	color:#fff;
}
</style>



<ul>
  <li>リンゴリンゴリンゴリンゴリンゴ</li>
  <li>ミカンミカンミカンミカン</li>
  <li>ブドウブドウ</li>  
</ul>

JavaScript

$(function() {
    $('ul li').matchHeight();
});