HTMLで画像を囲むようにテキストを回り込ませることはできますか？

質問

htmlで、画像にテキストを回り込ませたいのですが、<img src="画像url" align="left">か<img src="画像url" align="right">ではなく、画像を真ん中に持ってきて下記のように左右にテキストを回り込ませることは可能ですか？

テキストテキストテキスト
テキスト　　　　テキスト
テキスト 　画像　テキスト
テキスト　　　　テキスト
テキストテキストテキスト

回答No.3

aqucent · ベストアンサー

これで如何ですか？

<div>上段</div>
<div style='float: left; width: 33%'>中段左</div>
<div style='float: left; width: 34%; text-align: center'><img src='test.png' alt='test' height='400' width='400' /></div>
<div>中段右</div>
<div style='clear: both'>下段</div>

# 以下、個人的意見なので、参考程度に聞き流して下さい。
画像をセンタリングした上で左右にテキストを置くのは一般的に見難い傾向があるので、お勧めは出来ないです。
横文字は左上から右に流して読むのが普通です。
ですので、画像がセンタリングされているのなら、「左テキスト → 画像 → 右テキスト」と読みたくなりますが、
「画像がセンタリング＝左右にマージンがある」ので、読み流しづらい状況が出来ると思います。

お礼

ご回答ありがとうございます。
教えていただいたとおりにやったらできました。

クライアントからの要望だったのですが、おっしゃるとおり、読みにくいし見た目も悪いので、なんとか説得してみます。

回答No.4

aqucent

#3 です。1つ書き忘れました。

#3 の方法では、ブロック幅を33％(三分の一)ずつ取ることでセンタリングを実現しています。
ですので、画像の横幅がクライアントPCの画面の33％を超過すると、
画像の横幅が優先されて右にはみ出しますが、「中段右」のブロックでは回り込みが解除されていないので、
画像の上に「中段右」が表示されるという困った状況になります。
(Geckoの場合です。IEでの崩れ方は少し違うようです)
クライアントの環境は人それぞれですので、あまり大きな解像度の画像を置かないようにして下さい。
画面が 800x600 の解像度で閲覧に支障がなければ、多分問題ないと思います。

お礼

再度のご回答ありがとうございます。
どうしても回り込みが必要になった場合使わせていただきます。

回答No.2

PrintScree

<TABLE>タグを使用すれば出来ます。

サンプルの例だと、５行x３列のTABLEを作り、２列目の２行目から４行目を結合すれば出来ます。

お礼

更新していく内容なので、テーブル使ってややこしい組み方はしたくないんですよね。
ご回答ありがとうございました。

回答No.1

BLUEPIXY

回り込みの指定は、右または左しか無かったと思うので、できないと思います。

お礼

ですよねー
ご回答ありがとうございました。

でもCSSで何とかならないですかね？