jQueryAutoHeight.js

jQueryAutoHeight.js

QueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。

1.セレクタで指定したすべての要素を、その中の最大値にそろえる
2.セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる
（1行ごとにそろえられる）

★使いかたのpointメモ★
１.ダウンロードする
https://github.com/tinybeans/jQueryAutoHeight/releases

2.ファイルの読みこみ、高さをそろえたいセレクタに .autoHeight() を適用。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function($){
    $(揃えたいセレクタ).autoHeight();
});
</script>

and more

1.column : n
セレクタで指定した要素を、引数で渡した数ごとに、その中の最大値にそろえます。

jQuery(function($){
    $(揃えたいセレクタ).autoHeight({column:そろえたい数});
});

2.clear : 1
上記の column が設定されている場合、さらに {clear:1} を続けて設定すると、その数ごとの最初の要素に clear:both を設定することができます。

jQuery(function($){
    $(揃えたいセレクタ).autoHeight({column:そろえたい数, clear:1});
});

実際に使ってみたメモ(一部情報削除)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script>
$(function(){
$('.column .menuName').autoHeight({ column: 3 });
    $('.column .privilege1').autoHeight({ column: 3 });
    $('.column .summary').autoHeight({ column: 3 });
    $('.column .tour').autoHeight({ column: 3 });
    $('.column .menu_title').autoHeight({ column: 3 });
});
</script>
<article>
<div class="column">
  <div class="col type03 clearfix mgB40">
    <div class="inner clearfix">
      <ul class="box">

        <li class="tour"><p class="fz16">[メニュー]</p><p class="bold menu_title">ツアー</p></li>
        <li class="privilege1"><p class="mgB10 text_ry90">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></li>
        <li class="summary" style="min-height:1px;"></li>
        <li><a href="/contents/b672488/" class="btn_base type01">詳細を見る</a></li>
      </ul>
      <ul class="box">
        <li class="tour"><p class="fz16">[メニュー]</p><p class="bold menu_title">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></li>
        <li class="privilege1"><p class="mgB10 text_ry90">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></li>
        <li class="summary" style="min-height:1px;"></li>
        <li><a href="/contents/b671557/" class="btn_base type01">詳細を見る</a></li>
      </ul>
      <ul class="box">
        <li class="tour"><p class="fz16">[メニュー]</p><p class="bold menu_title">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></li>
        <li class="privilege1"><p class="mgB10 text_ry90">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></li>
        <li class="summary" style="min-height:1px;"></li>
        <li><a href="/contents/b672630/" class="btn_base type01">詳細を見る</a></li>
      </ul>
    </div>
  </div>
</div>
</article>
<style>
        .column {
          background-color: #fff;
        }
        .summary
        {

        }
        .privilege1
        {

        }
        .tour
        {

        }
        .menu_title
        {

        }
</style>