cssでfloatの代わりに横並びにする(display: inline-block)

2017/6/30

Shinichiro Sakamoto

広告

幅 240px の parent クラスの中に幅 80 px の child クラスを横並びに 3 つ並べたいときは次のようにする。

.parent {
  width: 240px;
}
.child {
  display: inline-block;
  vertical-align: top;
  width: 80px;
}

vertical-align を top にすると child クラスの要素が上でそろえられる。ポイントは次の二つ。

  1. display は inline-block
  2. 親要素と子要素のそれぞれに width を設定する(重要)

Warning: Invalid argument supplied for foreach() in /home/irohakasa/irohabook.com/public_html/wp-content/themes/child/single.php on line 125

広告

広告