Javascript でカラムの高さを揃える

複数カラムのレイアウトでボックスの高さを揃える方法です。

CSSで高さを揃える方法もあるようですが、jQueryやjavascriptを使用する方法が無難で実用的なのでしょうか。heightLineと、jQuery Auto Heightを使ってみました。

使用してみた感じではjQueryのほうはサイトを開いた瞬間元の高さが表示されてその後揃えるので一瞬カクっとなってしまいました。heightLineは読み込みも早く、カクッとなる事なく最初からその高さのように揃えてくれました。heightLineのほうが安心して使えます。

配布先

jQuery Auto Height
heightLine(作成者様サイト)

使い方

•heightLine(作成者様のサイトに詳しい使用方法もあります。)
head内でjsファイルを読み込みます。

<script type="text/javascript" src="js/heightLine.js"></script>

下記のような感じで、揃えたい要素に『heightLine』というclass名を付けます。

<div id="main" class="heightLine"></div>
<div id="side" class="heightLine"></div>

•AutoHeight
head内に下記のように読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryAutoHeight.js"></script>
<script type="text/javascript">// <!&#91;CDATA&#91;
jQuery(function($){
    $(#揃える要素名,#揃える要素名).autoHeight();
});
// &#93;&#93;></script>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能