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

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

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

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

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

使い方

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

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

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();
});

デモ

  • image1
  • image2
  • image3
  • image1
  • image1
  • image1
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

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

フォローする

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