• CSS

float使ってdivボックスを横に並べる

floatもうかれこれWeb歴5年ほどですが、いまだにfloatのスペルを忘れてしまうので備忘録として書き留めておきますw

divボックスを改行させないように回りこませて横に並べれるので、ちょっとした時に簡単に使えるタグなので多用しまくってますが、グリッドデザインなどにも使えます。

このサイトでも、レイアウトはfloatをつかっていますw

と入力すると、「float:left;」左寄せなので、

ひとつめのdivボックス
ふたつめのdivボックス
みっつめのdivボックス

って感じになります。※わかりづらいのでborderつけてますw

…がこのままだと、まだ回り込みのままなのでレイアウトがぐちゃぐちゃになってしまいます。そこで…

としてあげると、レイアウトが崩れずに表示されます。

<div style=”clear: both;”></div>だとコードが汚くなってしまうので

Class属性をしていして、CSS側で回りこみ解除したほうがスマートかと思います。

場合によっては、display:box;のほうが適切な場合もあるのでうまく使い分けて下さい。

関連記事

  1. CSSが効かない!そんな時は!importantで優先順位を変更する