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


See the Pen GNpgBW by nakanishi (@nakanishi) on CodePen.

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-09-10-55-59

横にブロックを並列する場合、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を解除することができる。

Leave a Reply

Your email address will not be published. Required fields are marked *