floatさせた要素、inline-blockの高さをそろえる。

display:boxはまだまだ実装が微妙だし、display:inline-blockやfloatだと、要素の高さ自体は変わらなくてborderとかbackgroundを使ったときいまいち困ったり。

というわけでそんなとき用のjs。相変わらずjQueryです。


HTML
[html]
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
[/html]

JavaScript
[js]
$(function(){
var pointHeight = new Array();
$(".box").each(function(){
pointHeight.push( $(this).height() );
});
function sort_num(a,b){return (b – a);}
var maxHeight = pointHeight.sort(sort_num);
$(".box").css({ height:maxHeight[0]+"px" });
});
[/js]

inline-blockに使う場合、ボックスの高さは下に伸びるので、vertical-align:topにしといて下さい。