jquery.tile.jsプラグインで列ごとに要素の高さを揃える

harada 904views 更新:2014年5月14日

要素の中身によってdivの高さが違ってしまうと見栄えがよくないことがあります。jquery.tile.jsプラグインを利用することで、列ごとに高さをそろえることができます。
ダウンロードはこちら

HTML(1列に3つずつ配置する場合)

<div class="row-fluid">
<div class="span4 textBox">
テキスト
</div>
<div class="span4 textBox">
テキストテキスト
</div>
<div class="span4 textBox">
テキストテキストテキスト
</div>
<div class="span4 textBox">
テキストテキストテキストテキスト
</div>
<div class="span4 textBox">
テキストテキストテキストテキストテキスト
</div>
<div class="span4 textBox">
テキストテキストテキストテキストテキストテキスト
</div>
</div>

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".textBox").tile(3);
});
</script>

すべての要素の高さを揃えたいときはtileの指定を空欄にします。

<script type="text/javascript">
$(function() {
  $(".textBox").tile();
});
</script>

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません