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

- リンク: https://torounit.com/blog/float%e3%81%95%e3%81%9b%e3%81%9f%e8%a6%81%e7%b4%a0%e3%80%81inline-block%e3%81%ae%e9%ab%98%e3%81%95%e3%82%92%e3%81%9d%e3%82%8d%e3%81%88%e3%82%8b%e3%80%82/
- 公開日: 2010-11-02T11:10:02+09:00
- 作成者: Toro\_Unit

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にしとい
て下さい。