プロが教えるわが家の防犯対策術!

gooブログを利用しています。
画像の「右下」に、「複数行」の文章を回り込ませる方法を教えて下さい。
下記のようなイメージです。(■の部分が全部で1枚の画像です)

■■■■■■
■■■■■■
■■■■■■  
■■■■■■ 文字文字文字
■■■■■■ 文字文字文字

色々探してみたのですが、
(1)leftのタグを使う「画像の右側(上から)複数行」
(2)bottomのタグを使う「右下側に1行のみ(?)」
しか見つかりませんでした。

タグの知識はあまりないので、これらを同時に使う事ができるのかとか(あるいはできないのでしょうか?)、分かりません。
どうぞご教示お願いします。

A 回答 (2件)

厳密には回り込みとは違いますが、テーブルタグを使うとご希望通りの表示ができます。



<table><tr><td><img src="画像のURL"></td><td valign="bottom">文字列</td></tr></table>

* 注意: 途中で改行しないでくださいね。

この例では、表の中の左のセルに画像、右のセルに文字を入れています。「valign="bottom"」と指定する事で右セル内の文字が下寄せになります。この方法は、画像の説明用の短文を書く場合に適しています ( ^^
    • good
    • 0
この回答へのお礼

さっそくのお返事ありがとうございます。

コピーしてやってみたら、イメージ通りのものができました!

画像を2個並べて、その横に文字を配置したりもしたかったのですが、これもテーブルタグを使えばできそうですね!
どうもありがとうございました!

お礼日時:2007/12/10 21:10

んー私だったら次のようにしてみると思います。


成功できるかはわかりませんが。

■■■■■■↑
■■■■■■|ここの空白の高さを70pxとすると
■■■■■■↓  
■■■■■■ 文字文字文字
■■■■■■ 文字文字文字

<img src="画像のURL" style="float:left;">
<p style="padding:70px 0 0 10px;float:right;">文字文字文字<br>文字文字文字</p>
<br style="clear:both;">
    • good
    • 0
この回答へのお礼

さっそくのお返事ありがとうございます。

教えていただいた方法、コピーしてやってみました。
なぜか画像と文章の間がものすごく開いてしまって、レイアウトがおかしくなってしまいました…
タグの意味はなんとなくでしか分からないので、たぶんですけど、画像が左に、文字の方は右に寄ってしまったんだと思います。
文字列の周りに枠ができてるのは分かったので、ピクセル数を変えれば、ここの中の調整ができるのは分かったんですが…

アドバイスありがとうございましたm(__)m

お礼日時:2007/12/10 20:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!