2014/10/19
2015/06/07 追記：より汎用性のある記述法があった。
例として幅640pxの親ボックスの内側に、隙間20pxを空けて幅200pxの子要素を３つ並べてみる。
子要素を wdth:200px;margin-left:20px;とすると全体で 220x3 = 660px となるので、親ボックスに収まらなくなる。そこで左端ボックスだけmargin-left:0px;とすればよいことになる。
.box-frame {
width: 640px;
margin: 0 auto;
overflow:hidden;/*float解除のため*/
background-color:#ddd;
}
.box {
width:200px;
margin-left: 20px;
float: left;
background-color: #eee;
}
.box-frame > .box:first-child {
margin-left: 0px;
}
これで最初の子要素（左端のボックス）だけ margin-left: 0px; となる。
margin-left でなく margin-right を使い、最後の要素のみ margin-right:0px; としてもよいのだが、IE8 が最後の要素を指定する :last-child プロパティをサポートしていないため、使わなかった。
<div class="box-frame"> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> </div>
2015/06/19追記 : 後から知ったのだが、以下のことをしようと思ったら実は jquery.matchHeight.js というのを使ったら即解決みたいで、コリャえらく無駄脚を踏んだような気になった。よかったら無駄脚振りを読んでください。---
だが各ボックスの内容によってボックスの高さが揃わない。そこでそれらを揃えることにする。これには jquery.heightLine.js というjQuery Plugin使うと全く簡単にできてしまう。 下のようにjQueryとjquery.heightLine.jsを読み込んでおき、揃えたい要素を指定する。
<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.heightLine.js"></script>
<script type = "text/javascript">
$(function(){
$(window).load(function() {
$(".box-frame > div.box").heightLine();
});
});
</script>
この際、box-sizing というCSS3で使われるプロパティを使ってみたらどうかと思う。
box-sizingプロパティは、その値（contet-boxか、border-box）によって下の図のようにwidthの取り扱いが変わってくる。モダンブラウザのデフォルトは content-box である。
そこで各ボックスをbox-sizing:border-box;としておき、ボックスのwidthを指定しておけばborderやpaddingを変更してもボックスの横幅が変わることはなくレイアウトが崩れることがなくなる。
.box-frame, .box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
box-sizingは上のように今のところベンダープレフィックスが必要だが、これで簡単にボックスのwidthを揃えられる。
ところが、widthについては問題ないのだが、実はjquery.heightLine.jsは border-box モードでは高さが微妙に揃わなくなる（多分ボーダー分低く表示される）。そこでド素人なのだがjquery.heightLine.jsを少しイジってみたところ、とりあえず期待したように動いてくれた。
<script type = "text/javascript" src = "jquery-1.10.2.min.js"></script>
<script type = "text/javascript" src = "jquery.heightLine.modified.js"></script>
<script type = "text/javascript">
$(function(){
$(window).load(function() {
$(".box-frame > div.box").heightLine();
});
});
</script>
先ほどのjavascript部分を上のように書き換えると高さがぴったり揃うようだ。
いい加減だがいちおうソースはこちら。
あと、$(".box-frame > div.box").heightLine(); と指定すると、すべての子要素が最大の高さに揃えられてしまう（格子状に並べるとすべてのボックスの高さが揃う）ので、段ごとに揃えたい場合は、段ごとに別のクラス名を、例えば <div class="box-frame frame1">のように加えて識別すればよい。
段ごとに揃えたいのなら、話が元に戻るようだが、content-boxに限って、jQuery pluginでなく、普通のjavascript libraryのheightLine.jsの方が使い勝手がよいかもしれない。
と、ここまでfloatを使って、小難しい方法でボックスを横並べしてみたが、display:inline-boxやdisplay:table-cellなどを使った方が簡単だったかもしれない。これもひとえに古いバージョンのIEへの配慮だが、inline-boxについてはハックの方法があるみたいだし、table-cellもIE ver.8以降ならサポートされているみたいなので、そろそろこの方法は使われなくなっていくだろうと想像する。
Ida Qitailang