tile.jsを使って、自動的にコンテンツの高さを調整します。簡単便利！！
ダウンロード＞＞＞jquery.tile.js Demos
--------------------------------------------------------------------------
2012/02/19追記
画像が入るとうまく動かないようなので、書き方を変更
$(window).load(function() {
$(".mod_grid3hBox_inner").tile(3);
});
参考＞＞＞画像が含まれる要素の高さをjquery.tile.jsを使って調整する方法
--------------------------------------------------------------------------
2015/02/26追記
スマホで横にしたときには下記追加
$(function(){
window.onresize = function(){
$(".mod_grid3hBox_inner").tile(3);
};
});
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tile.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".mod_grid3hBox_inner").tile(3);
});
</script>
HTMl
<div class="mod_grid3hBox"> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3Box_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p> <p class="mod_caption">キャプション</p> <p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p> <!-- mod_grid3hBox_inner_end --></div> <div class="mod_grid3hBox_inner"> <h3>タイトル</h3> <p>写真とキャプションをとりました。</p> <!-- mod_grid3hBox_inner_end --></div> <!-- mod_grid3hBox_end --></div>
CSS
.mod_grid3hBox{
width:720px;
margin-right:-20px;
}
.mod_grid3hBox_inner{
width:220px;
float:left;
margin:0 20px 10px 0;
background-color:#FFFFCC;
}
.mod_grid3hBox_inner h3{
font-weight: bold;
font-size: 1.4em;
border-bottom:double 3px #000;
margin:0 0 5px 0;
}
.mod_grid3hBox_inner p.mod_caption{
color:#666;
padding:0 0 5px 0;
}