
CSSで左下・右下にある画像を回り込ませたい!

左上や右上にある画像をfloat
タグを使って回り込ませるのはよく使いますが、
下記のように画像が左下・右下にあった場合はどう組めばいいかを紹介します!

画像が左下にある場合のソースです
See the Pen JOaxmx by ayumi (@tam-takayama) on CodePen.
解説します

- この場合「#left-box」で全体をつつんでいて、float解除の為に
overflow:hidden
をつけています。もし、はみ出させたい要素があるなどの理由でoverflow:hidden
が使えない場合はclearfixを使ってください。
参考記事:もう一度、「clearfix」について考えてみた。
- 画像の上に「.space」をのせているイメージです。縦幅によって画像が上下しますのでお好みで数字を変えてください。「%」単位でも可能です。
- 「.img」で上に乗っている「.space」のfloatの解除を
clear:both
でしています。 - 画像を右下に配置したい場合は、「.space」と「.img」の
float
をright
に変えてください。
まとめ
ブラウザやスマホの機種によって見栄えが代わり、画像の下に文字が回り込んだりする可能性があるので実機チェックの際はご注意ください!
「.img」の部分は、空divにしてCSSで縦幅指定してあげてbackground
で#fffなどを指定すれば謎の空白を作ることもできます!(使い所がないかもしれませんが)