THE HAM MEDIA BLOG

画像をブロックの左下に配置してテキストを回り込ませる方法を考える

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
画像
img
float
回り込み

画像をブロックの左下に配置してテキストを回り込ませる方法を考える

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

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

どうやればできるんだ?

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

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

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

■サンプル1(height:200px)

sampleダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

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

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

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

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

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

■サンプル2(height:230px)

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストsample

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

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

■サンプル3(height:200px)

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

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストsampleダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

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

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

■サンプル4(height:200px)

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

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストsampleダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

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

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

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

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

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

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/102886385
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

[CSS][HTML]画像が下に回り込むレイアウト
Excerpt: 「下に回り込む」って日本語がおかしいですが。 画像とテキストの下をそろえるってかんじですね。 画像をブロックの左下に配置してテキストを回り込ませる方法を考える | THE HAM ME..
Weblog: mersy's lab
Tracked: 2008-11-13 20:16

右下または左下においた画像に文字列を回り込ませるHTML/CSS
Excerpt: 普通、HTML で画像の回り込みというと、右上か左上に画像があって、そこに文字列が回り込むという感じです。これは簡単です。画像に対して float: left; すれば OK です。 しかし、右下か..
Weblog: OTCHY.NET
Tracked: 2009-02-19 21:13

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。