画像の両側に文章を回り込ませるには？

質問

うまく表示されるか不安ですが…
　下図のように画像を配置するには
　どうすれば良いでしょう？
　（ ○○のところは文章です。）

　文章の途中に改行は無く、ページ
　の端で自然に折り返される形です。

┌──────────────┐
│○○○○○○○○○○○○○○│
│┌──┐○○○○○○○○○○│
││画像│○○○○○○○○○○│
│└──┘○○○○○○┌──┐│
│○○○○○○○○○○│画像││
│○○○○○○○○○○└──┘│
│○○○○○┏━━┓○○○○○│
│○○○○○┃画像┃○○○○○│
│○○○○○┗━━┛○○○○○│
│○○○○○○○○○○○○○○│
└──────────────┘

　上から2つ目の画像までは、<IMG>に
　「align="○○"」を入れることで、
　思い通りになりました。

　問題は3つ目の画像です。

　（<TABLE>を使わず）画像の両側に
　文章を回り込ませることは不可能
　なのでしょうか？

回答No.2

noname#227796 · ベストアンサー

align="all"でできなかったか？と思ったのですが、ダメでした・・・

そうなると、TABLEタグを使うか、他にトリッキーな手段を使うか、ということになります。

スタイルシートを使った、ちょっと反則的な方法ですが、こういうのはどうでしょう？

<p style="float:left; width:30%;">
左側の文字を羅列
</p>
<p style="float:right; width:70%;">
<img src="画像" align="left">
右側の文字を羅列
</p>
<br style="clear:both;">

※widthは適当に変更のこと。

段落のタグ<p>を使って、二段組みにして、一方に画像を配置したわけです。

まあ、こういうトリッキーな方法を使うくらいなら、TABLEタグできれいに配置した方が、後々のためには良いのではないかと思いますが。
スタイルシートの場合、ブラウザによって結構違いがありますから、必ずしもうまく配置できるとは限りませんので。

お礼

いろいろ試してまで方法を考えてくださった
　のですね(ｉдｉ) どうもありがとうございます!!!

　今回は、仰るように何か別の方法を考えてみる
　ことにします。（…というか、別のレイアウトを
　考えます。）だけど教えてくださった方法も実際
　やってみて確認しました。段組って面白いです☆
　どこか別のところに活用できそう♪

　スタイルシートがブラウザによって結構違いがあると
　いうことも知らなかったので、分かって良かったです。

　本当に、どうもありがとうございました!!! m(_ _)m

回答No.1

elttac

わたしの知る限りでは，残念ながら，不可能です。もしできたとしても，table を使用する以上に難しいと思われます。
　CSS でその位置に画像を置くことはできても，テキストがオーバーラップする（回り込まない）ので，ご所望の結果にはなりません。

お礼

>> 残念ながら，不可能です。

　ですよね!! 無理だと分かっただけでも有難いです。
　「もしかしたら可能なんじゃないか」「自分が知ら
　ないだけで、そういうタグがあるんじゃないか」と
　思ってたら、いつまで経っても、そこから先に進め
　ないから(^-^;) ご回答ありがとうございました!!!

　諦めて違うレイアウトを考えます♪