問題
解決策
高さを揃える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はこちら
- リスト
- リスト
- リスト
リスト
コメント