display: table-cellを使って横に並べる

Tweet

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を解除することができる。