商品の一覧ページなど、

違う長さの文字列が同列要素に入っている場合に、

高さを揃える必要が出てきたりすることはよくあります。

いつも高さを揃える関数を、少しずつ改良しながら使いまわしていたのですが、

形が落ち着いてきたのでjQueryプラグインにしてみました。

↓こちらがデモです

DEMO

↓「jQuery-fixHeightSimple」はこちらからダウンロードしてください

Download

使い方

1.HTMLでjQueryとjQuery-fixHeightSimpleを読み込んでください。

XHTML

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery-fixHeightSimple.js"></script>

1 2	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery-fixHeightSimple.js"></script>

 

2.jQueryで対象要素にプラグインをあててください。

XHTML

<ul class="items cf"> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> </ul>

1 2 3 4 5 6 7

<ul class="items cf"> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> <li><p class="image"><img src="images/home.jpg" width="120" height="120" alt="image"></p><p class="text">テキストテキストテキストテキストテキスト</p></li> </ul>

このようなhtmlで<li>の高さを揃える場合は次のように指定してください。

JavaScript

$(function(){ $(".items li").fixHeightSimple(); //$(高さを揃える要素).fixHeightSimple(); });

1 2 3

$(function(){ $(".items li").fixHeightSimple();  //$(高さを揃える要素).fixHeightSimple(); });

高さを揃える要素すべてを同じ高さにする場合はこれで高さを揃えることができます。

 

行ごとに高さを揃えたい場合は、オプションで列数を指定してください。

$(function(){ $(".items li").fixHeightSimple({ column : 5 //横に5個並べている場合 }); });

1 2 3 4 5

$(function(){ $(".items li").fixHeightSimple({ column : 5  //横に5個並べている場合 }); });

これで、行ごとに高さが揃います。

 

よろしければ、ご利用くださいませ。