こんにちは、ハル@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.
ダウンロードした「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();
});
コメント