こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

 うまく表示されるか不安ですが…
 下図のように画像を配置するには
 どうすれば良いでしょう?
 ( ○○のところは文章です。)
 
 文章の途中に改行は無く、ページ
 の端で自然に折り返される形です。
 
┌──────────────┐
│○○○○○○○○○○○○○○│
│┌──┐○○○○○○○○○○│
││画像│○○○○○○○○○○│
│└──┘○○○○○○┌──┐│
│○○○○○○○○○○│画像││
│○○○○○○○○○○└──┘│
│○○○○○┏━━┓○○○○○│
│○○○○○┃画像┃○○○○○│
│○○○○○┗━━┛○○○○○│
│○○○○○○○○○○○○○○│
└──────────────┘
 
 上から2つ目の画像までは、<IMG>に
 「align="○○"」を入れることで、
 思い通りになりました。
 
 問題は3つ目の画像です。
 
 (<TABLE>を使わず)画像の両側に
 文章を回り込ませることは不可能
 なのでしょうか?
 

投稿日時 - 2004-05-22 17:45:40

QNo.867085

暇なときに回答ください

質問者が選んだベストアンサー

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タグできれいに配置した方が、後々のためには良いのではないかと思いますが。
スタイルシートの場合、ブラウザによって結構違いがありますから、必ずしもうまく配置できるとは限りませんので。

投稿日時 - 2004-05-22 18:44:25

お礼

 
 いろいろ試してまで方法を考えてくださった
 のですね(iдi) どうもありがとうございます!!!
 
 今回は、仰るように何か別の方法を考えてみる
 ことにします。(…というか、別のレイアウトを
 考えます。)だけど教えてくださった方法も実際
 やってみて確認しました。段組って面白いです☆
 どこか別のところに活用できそう♪
 
 スタイルシートがブラウザによって結構違いがあると
 いうことも知らなかったので、分かって良かったです。
 
 本当に、どうもありがとうございました!!! m(_ _)m
 

投稿日時 - 2004-05-22 19:35:07

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

投稿日時 - 2004-05-22 18:28:51

お礼

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

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

投稿日時 - 2004-05-22 19:24:07

あなたにオススメの質問