[CSS] 2カラムレイアウト(固定幅 + 可変幅or残りの幅)
概要
2カラム用のレイアウト色々。
table型
レイアウトの仕方が直感的で分かりやすいと思われる。
左カラム(固定幅)、右カラム(可変幅)
parent
吾輩は猫である | 吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 |
坊っちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。 |
parent
吾輩は猫である | 吾輩は猫である。 名前はまだ無い。 |
坊っちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。 |
左カラム(固定幅&上揃え)、右カラム(残りの幅)
parent
吾輩は猫である | 吾輩は猫である。 名前はまだ無い。 |
坊っちゃん | 親譲りの無鉄砲で小供の時から損ばかりしている。 |
code
div-float型
少々使い辛い印象。
table型とは違い右カラムの要素がそれぞれ独立しているので、可変幅にした場合は異なる幅となる。
左カラム(固定幅)、右カラム(可変幅)
parent
吾輩は猫である
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。
左カラム(固定幅)、右カラム(残りの幅)
parent
吾輩は猫である
吾輩は猫である。
名前はまだ無い。
名前はまだ無い。
坊っちゃん
親譲りの無鉄砲で小供の時から損ばかりしている。
code
dl-float型
div-float型とほぼ同じ。
左カラムを固定する前提だとdlを使うような内容が多いかと。
左カラム(固定幅)、右カラム(可変幅)
parent
- 吾輩は猫である
- 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 - 坊っちゃん
- 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
parent
- 吾輩は猫である
- 吾輩は猫である。
名前はまだ無い。 - 坊っちゃん
- 親譲りの無鉄砲で小供の時から損ばかりしている。
左カラム(固定幅)、右カラム(残りの幅)
parent
- 吾輩は猫である
- 吾輩は猫である。
名前はまだ無い。 - 坊っちゃん
- 親譲りの無鉄砲で小供の時から損ばかりしている。
code
dl-flex型
左カラム(固定幅)、右カラム(残りの幅)
1行の場合のみなら選択肢に入るか。
parent
- 吾輩は猫である
- 吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
parent
- 吾輩は猫である
- 吾輩は猫である。
名前はまだ無い。