MathPython500231 views
ヒストリア293808 views
教育149914 views
LaTeX964644 views
雑学1474079 views
中学理科1632943 views
小学社会311307 views
数学講師2905779 views
小学理科721270 views
高校国語789574 views
Help
Tools

English

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

幅 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 を設定する(重要)