幸福なプログラマ

プログラマは幸福になれる。

floatでいろいろ寄せる

左に寄せる

こんな感じで見出しを左に寄せたいときは、cssでfloat:leftの設定を行う。
同様にfloat:rightを設定すれば見出しは右に寄ります。

h1 {
    float:left;
}

floatプロパティによる流し込みを解除する

float: both;

画像を並べて表示する

先行するフロートした要素が存在する場合、同様にフロートを指定した次の要素は前の要素とかぶらないように並んで表示されます。
また、内容幅を超えた場合は下に移動します。
この仕様を活用すれば、imgタグにfloat:leftを設定することで以下のように画像を一覧表示させることができます。