See the Pen GNpgBW by nakanishi (@nakanishi) on CodePen.
横にブロックを並列する場合、float: leftではなくdisplay: table-cellを使うことができる。これはclearfix等を使わず、またcalc()を使う必要もなく実装できる点が良い。(calcを使う場合はこちらの記事を参照)
ポイントは、ある親要素の中の「display: table-cellを指定した子要素」が横に並ぶという点である。そのため下のソースのように、横に並べたいブロックにtable-cellを指定した後、それを囲むdiv等の親要素が必要である。
<div class="container"> <div class="a"></div> <div class="b"></div> </div> <div class="container"> <div class="a"></div> <div class="b"></div> </div>
.container { } .a, .b { display: table-cell; } .b { padding-left: 20px; }
注意点
またdisplay: table-cellを用いた場合、tableと同じ性質になるので、marginを使って位置を調整することができない。そのため間隔を開けたい場合にはpaddingを使用する。
またレスポンシブデザインに対応するために、ブロックの配置を変更したい場合は、float: left;等を使うことでdisplay: table-cellを解除することができる。