問題 × 解決策

高さを揃えるjQueryライブラリ「matchHeight」がすごく便利!

問題

コンテンツの高さを揃えたい。

解決策

jQueryライブラリ「matchHeight」を使用する。

 

高さを揃えるjQueryライブラリ

高さを揃えるjQueryライブラリは色々ありますが、個人的に一番気に入っているライブラリ「matchHeight」をご紹介します。

「matchHeight」のダウンロード

「matchHeight.js」を以下よりダウンロードします。

JSファイルの読み込み

ダウンロードしたファイルの中にある「jquery.matchHeight.js」を読み込みます。

<script type="text/javascript" src="ファイルパス/jquery.matchHeight.js"></script>

HTMLの構築を行います。

例として、「dsib」クラスを持つulタグを構築します。

<ul class="dsib">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト<br>リスト</li>
</ul>

次にCSSの構築を行います。

ulタグのクラス「dsib」の中のliタグに対し、「display: inline-block;」と背景色を設定します。

ul.dsib > li{
	display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fef5f2;
}

最後にjavascriptの構築を行います。

「matchHeight」の機能を適用させます。

jQuery(window).on('load', function() {
	if($('ul.dsib > li')){
        $('ul.dsib > li').matchHeight();
	}
});

DEMOはこちら

  • リスト
  • リスト
  • リスト
    リスト

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 + 8 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧