CSSで2カラムを作ってみる - kojika17

CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい

[kojika17]

【10パターン、書いた】

[U1and0]

２列表示

[patapata5050]

２カラムの色々なやり方。floatのおさらい

[fkagami]

これは良い記事

[norip44]

CSSで作るウェブデザインの参考に、復習してみましょう。「全部知っている」のなら、あなたは中級者ってとこかな？

[efcl]

CSSで2カラムデザインを作る10パターン

[hecomi]

すごい便利

[Rewish]

すばらすぃ〜とですぅ〜

[heyMackie]

よい記事

[yuhiisk]

kojikaさんの良記事

[nibushibu]

一長一短。flexが一番気に入ってる。

[wdr_s]

結局IE8とかの対応を考えるとfloat + clearfix が多くなる。気がつけば、10年近くやってることが変わってない。

[otchy210]

box っていつの間にか、flexbox を経て flex になってたのか。知らなかった…。

[coolworld]

ありがたや。

[akidon1012]

“display: flex”

[mei_koutsuki]

これだけ知ってるとあれこれ応用出来ていいですよね(´ω｀)

[glat_design]

良い。CSSは意味を持たないので、やりたいこととの相性で手段を選べる /

[oki448jp]

CSSのカラムデザインパターン／CSSで2カラムを作ってみる

[thleap]

横並びの方法は状況によって選ぶべきだけど、今は考えずに float + float で並べてしまうことが多い。場面に応じて使い分けよう

[bitgleams]

2014年7月4日記事

[akiyoshi83]

良記事。しかし2カラムにするだけなのに10パターンもあるのがそもそもCSS辛い…

[koma2]

“スが400pxで、子のボックスに幅190pxとmargin 20pxが指定され”

[ku_marin]

サンキューコッジー

[Sips]

CSS

[kussun]

ネガティブマージンをよく使ってた。