この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。
3つのdivボックスが横に並ぶ行が4行あるレイアウトで、divの内容はphpで動的に出力しており、普通にfloatで並べただけだと高さが凸凹になってしまう…。
不都合が起こったりする可能性もあるので決めうちで高さを指定するのではなく、あくまで自動で各行最適（最低限）の高さになるようにしたい。
そんな時、親の要素にdisplay:table、子の要素にdisplay:table-cellを指定すれば高さを自動的に揃えてくれる。
ただ、私の場合は子の要素内に色々あるせいか高さは揃っても横並びにした時点で横幅が若干おかしくなってしまった。
どうにも上手くいかないのでtable-cellを使わない強引な力技でjQueryで調節させることにした。
簡単に説明すれば各行のそれぞれのボックスの高さを取得して、同じ行のボックスの高さを一番の高さに合わせるというもの。
また、前提条件としてboxという文字列に連番を付けたIDのdivを出力しているとする。
<html>
<div id="box1">要素</div>
<div id="box2">要素<br />要素</div>
<div id="box3">要素<br />要素<br />要素</div>
</html><style>
div{
float: left;
height: auto;
}
</style><script>
$(function(){
//1行の要素数, 行数, 要素のid名
adjustableBoxHeight(3, 4, "#box");
});
function adjustableBoxHeight(box, line, idname){
var total = box * line; //総box数
var max_height = 0; //高さmax値
var current_height = 0; //参照中のboxの高さ
for(i = 0; i < total; i++){
if(i % box == 0){
//行最初で初期化
max_height = 0;
}
current_height = $(idname+i).height()
if(current_height > max_height){
max_height = current_height;
}
if((i + 1) % box == 0){
//行の最後で、同じ行のすべてのbox高さをmax値に設定
for(j = 0; j < box; j++){
$(idname+(i-j)).css( 'min-height', max_height );
}
}
}
}
</script>
