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_grid 3 hBox{ width : 720px ; margin-right : -20px ; } .mod_grid 3 hBox_inner{ width : 220px ; float : left ; margin : 0 20px 10px 0 ; background-color : #FFFFCC ; } .mod_grid 3 hBox_inner h 3 { font-weight : bold ; font-size : 1.4em ; border-bottom : double 3px #000 ; margin : 0 0 5px 0 ; } .mod_grid 3 hBox_inner p.mod_caption{ color : #666 ; padding : 0 0 5px 0 ; } |