こんにちは、イナフクカズヤです。
ボックスを横並びにさせる方法にfloatがあります。今時はflexboxでしょ！という話は一旦置いておくとして、floatだと、ボックスの高さが一定になりません。
ボックスの中身によって下記のようになります。
このfloatで横並びにしたボックスを一定の方法にする一つとしてjQueryプラグインの「jquery.matchHeight.js」があります。
今回は、このプラグインのご紹介です。
jquery.matchHeight.jsのダウロード
まずは、「jquery.matchHeight.js」をダウンロードします。下記のGithubよりダウンロードしてください。
https://github.com/liabru/jquery-match-height
jquery.matchHeight.jsの使い方
まずは、floatで横並びにしたデモサイトを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>float</title> <style> .container{ width:1000px; margin:0 auto; overflow: hidden; } .item{ float:left; width:320px; margin-right:10px; background-color: #000000; color:#ffffff; } </style> </head> <body> <div class="container"> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </body> </html> |
こちらの結果は下記の画像になります。
中身のコンテンツによってボックスの高さが異なってくるのがわかります。こちらを一定にします。
jQuery本体と先ほどダウンロードしたjquery.matchHeight.jsを読み込みます。
最後に.matchHeight()を使って設定を行います。今回はitemクラスのボックスの高さを揃えたいので、下記のように設定します。
|
1 2 3 4 5 6 7 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="./js/jquery.matchHeight-min.js"></script> <script> $(function() { $('.item').matchHeight(); }); </script> |
下記は全体のソースコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>float</title> <style> .container{ width:1000px; margin:0 auto; overflow: hidden; } .item{ float:left; width:320px; margin-right:10px; background-color: #000000; color:#ffffff; } </style> </head> <body> <div class="container"> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="item"> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="./js/jquery.matchHeight-min.js"></script> <script> $(function() { $('.item').matchHeight(); }); </script> </body> </html> |
結果は下記のようになります。高さが一定になっているのがわかりますね。
さいごに
floatを使ったレイアウトで高さを一定にしたい時に是非使ってみてください。