HTML要素の高さを揃える(matchHeight)

要素の高さを揃えるプラグイン「jquery.matchHeight.js」

サイト制作で散々お世話になっているjQueryプラグイン

テキスト入れたHTML要素を綺麗に並べたいけど、レスポンシブサイトでウインドウサイズを変えたら段落ちする。
そんな時は「jquery.matchHeight.js」が解決してくれる。

ダウンロードサイト
http://brm.io/jquery-match-height/
https://github.com/liabru/jquery-match-height

デモ

  • image1
  • image2
  • image3
  • image1
  • image1
  • image1

使い方

対象のタグに同じclassを付与する

ここではclass名を「matchHeight」としました。

<ul id="demo">
  <li class="matchHeight"><img src="image_01.png" height="100" /></li>
  <li class="matchHeight"><img src="image_02.png" height="150" /></li>
  <li class="matchHeight"><img src="image_03.png" height="200" /></li>
</ul>

cssで横並び

ul#demo {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}
ul#demo li {
  list-style: none;
  margin: 0 4px;
  background: #033649;
  width: 30%;
  min-height: 50px;
  padding: 10px;
}

jsの読み込み

jQuery(function($){
  $('.matchHeight').matchHeight();
});
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク