[CSS] 2カラムレイアウト(固定幅 + 可変幅or残りの幅)

Web制作

• CSS
• HTML

概要

2カラム用のレイアウト色々。

table型

レイアウトの仕方が直感的で分かりやすいと思われる。

左カラム(固定幅)、右カラム(可変幅)

左カラム(固定幅&上揃え)、右カラム(残りの幅)

code

div-float型

少々使い辛い印象。
table型とは違い右カラムの要素がそれぞれ独立しているので、可変幅にした場合は異なる幅となる。

左カラム(固定幅)、右カラム(可変幅)

左カラム(固定幅)、右カラム(残りの幅)

code

dl-float型

div-float型とほぼ同じ。
左カラムを固定する前提だとdlを使うような内容が多いかと。

左カラム(固定幅)、右カラム(可変幅)

左カラム(固定幅)、右カラム(残りの幅)

code

dl-flex型

左カラム(固定幅)、右カラム(残りの幅)

1行の場合のみなら選択肢に入るか。

code