THE HAM MEDIA BLOG

mixiのとあるコミュニティの質問にて、
画像を左下に配置して、テキストを回り込ませる方法は？
というような質問があがってた。

確かに"float:left"させただけだと、回り込みはするものの、
一番上に配置されてしまうし、marginとかpaddingとかをつけたとしても、
その部分にテキストは流れこまずに、空白となってしまう。

どうやればできるんだ？

というわけで考えてみた。

img→テキストの順でfloat:leftさせてみる

通常の配置方法というわけではないけど、こんな風になる。

■サンプル１（height:200px）

ソースはあげていないが、単純にpの中にimgとテキストを入れ、
imgにfloat指定をしただけである。

このままの方法だとdivの高さも確保されないので、
周りの囲み線部分にheightを指定してある。

ちなみに、赤文字になっている部分は、
imgを挿入した直後のテキストを示している。

テキスト→imgの順でimgにfloatを指定してみる

テキストの前に持ってきておいた画像をテキストの後ろに配置してみた。

■サンプル２（height:230px）

ここでの赤文字になっている部分は、
imgを挿入しする直前のテキストを示している。

pタグの中にimgを入れているために、最後の一行が回り込んでいた。
（IEではテキストの量の都合上回り込みは見られないです。）

■サンプル３（height:200px）

先ほどのサンプル２にて、pタグの中にinlineとしてimgを挿入して、
floatさせていると、文中の画像が回り込みそうだなんて思ったので、
文の途中でimgを入れてfloatさせてみることにした。

赤文字の直後にimgを入れてfloatさせているのだが、
なんと見事にとちゅうから回り込みを初めてくれた。

考えてみたら、結局この方法を使うにはテキストの間に画像を入れるしかないので、
pタグの中だろうと無かろうと、テキストの間に画像を入れるには違いないのだから、
結局はこの方法になるのかなと思う。

■サンプル４（height:200px）

入れる位置を少し調節してみた。

IEだと綺麗に入っていないが、その他のFirefox3やOpera9.5、Safari3では
きちんと画像の高さと同じ分だけテキストが回り込んでいる。

結局はこの方法がベストなのかなと思う。

画像であるimgをテキストのどの位置に入れるかで位置が変わるが、
そこは調節して入れるしかないだろう。

その他に試したけど駄目だったこと

floatした画像をmarginとかマイナスmarginとかで入れようとしたけど失敗。
positionを設定してtopとかで指定しようとしたけど、これも回り込みせず。

結局上記に書いた方法以外はいい手が浮かばなかった。

自動的に一番下に来て回り込み表示するようにする方法は、未だ模索中。

この他の方法、ありましたらお教えください！