HTML/CSS 項目の横並べ

ホームページを作るうえで必ず出る項目の横並べ

よく使われるコードを記載します

flexbox

これが一番良い

See the Pen Untitled by はーと (@spite400k) on CodePen.

float

これが一番不便。。。

See the Pen Untitled by はーと (@spite400k) on CodePen.

• floatを指定した要素の親要素に高さ反映されなくなってしまう
  →heightを50pxに指定
• 幅が大きくなって３つ目が次行に回される
  →子要素にbox-sizing: border-boxを指定して、borderを含めて幅計算するようにする
  　　　ただしmarginは考慮されないため、marginを減らすか、widthの33%→30%に減らす必要あり

display:table-cell

See the Pen Untitled by はーと (@spite400k) on CodePen.

• display: table-cellの場合、marginが効かない
  　→「border-collapse」「border-spacing」で間隔をあける