IMG の横に文章、そしてまた IMG の横に文章…。

質問

<img src="イメージ 1" align=left>
+++ 文章 1 +++
<img src="イメージ 2" align=left>
+++ 文章 2 +++

イメージは全て左側に表示させ、その横にイメージ関する文章を加えたいのですが、上記のような記載の場合、イメージ 1 に対して文章 1 の量（高さ）が少ない場合、後のイメージ 2 がイメージ 1 の右横にずれた状態で後が続いてしまいます。

<br> を使って無理矢理やるのもいいのですが、これですとブラウザによって余白の取り方が違うので、何かタグを使って、イメージ 2 は自動的にイメージ 1 の下に回り込むようにし、且つ文章 2 はイメージ 2 の右横頭から始めるような形にしたいのですが、そのようなタグはありますでしょうか？

できればテーブルの使用は避けたいです。

よろしくお願い致します。

※ この場を借りて、今まで回答いただいて皆様に改めてお礼申し上げます。ありがとうございました。

回答No.4

NYOI · ベストアンサー

<br clear="all">もしくは<br clear="left">でいいのでは？

お礼

これが一番シンプル且つ思ったようになりました。
ありがとうございます。

回答No.6

steel_gray

配置を換えても意味が変わらないものを整然と並ばせたいがためにレイアウト用にテーブルを使用するのは本来の使い方ではないけど、
この場合、位置関係が画像と文章の関係を示す事になる→CSS抜きでも位置関係が重要になるのだから素直にtableとするのが妥当なんじゃないでしょうか？

回答No.5

aqucent

こういうことでしょうか。

<div>
　<div style="float: left">
　　<img src="test.gif">
　</div>
　<div style="float: left">
　　+++ 文章 1 +++
　</div>
</div>

<div style="clear: both">
　<div style="float: left">
　　<img src="test.gif">
　</div>
　<div style="float: left">
　　+++ 文章 2 +++
　</div>
</div>

参考URL：

http://www.htmq.com/style/float.shtml

回答No.3

noname#20964

これで如何でしょうか。
ただ、IEとFirefoxで見え方に違いが出ますので、画像と文章を包む要素のmarginやpaddingを調整した方が良いと思います。
それとborderは指定しない方が良いと思います。
<p>
<img src="イメージ 1" style="float:left" width="100" height="200">
+++ 文章 1 +++
</p>
<p style="clear:both">
<img src="イメージ 2" style="float:left" width="100" height="200">
+++ 文章 2 +++
</p>

回答No.2

chimaki-t

この場合は<br>を使うのが正しい表記のあり方でしょう。

どうしても<br>を使いたくないなら#1さんの書いている通りcssを使って絶対位置を指定してやるしか方法がありませんが、その場合はフォントの大きさや行間や表示幅など、隅々までしっかりと指定してやらないと、ブラウザによっては文字や絵が重なって読めないページになる恐れがあります。

回答No.1

noname#40524

カスケードレイヤーシートを使用するのは如何でしょう。
『テーブルタグ』に近い表示に成ります。
微調整は位置の数値を変更するだけですので・・・
愚子は対応しているサイトはすべてカスケードレイヤーシートで
作成し、テーブルタグは使用して居ません。
後は、フラッシュで作るとか。
昔のテーブルタグの場合は『透明画像』でこういう場合してますね。