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

質問する
マイページ

ログイン

<< 前の質問 | 次の質問 >>

解決済みの質問

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

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

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

通報する

QNo.867085

yuka_chan

暇なときに回答ください

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

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

お礼

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

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

回答を評価する （0）
通報する

ANo.2

noname#227796

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

はい

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

回答（2）

ANo.1

elttac

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

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

お礼

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

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

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

回答を評価する （0）
通報する

あなたにオススメの質問

ページTOP