横幅の違う画像をalignを使って左寄せ

質問

画像A 文字A
画像B 文字B

というような表示をさせたくて、alignを使って左寄せにしたのですが、画像Bの横幅が画像Aより狭いためか、画像Aの隣に表示されてしまいます。

画像A画像B文字A
文字B

という感じです。
タグは

<img src="画像A" alt="" align="left">
<img src="画像B" alt="" align="left">
<br><br>
文字A<br>
文字B

と記述しています。
Fire foxではちゃんと狙い通りに表示されたのですが、IE7だとダメでした。
なぜIE7では表示されないのでしょうか？IE7で表示されるようにするにはどうしたらいいのでしょうか？
わかりにくい説明だと思いますが、よろしくお願いいたします。

回答No.7

ORUKA1951

テキストが改行が必要な長さがあり、かつ、それが３行以上になると難しい。
≫画像の種類とテキストが何かいうのはどういう意味でしょうか？拡張子？
いいえ、たとえば右の文章は左の図の、説明であるとか・・

HTMLに書くとしたら
<img>
<p>上の部分は赤いが</p>
<p>下は黄色い</p>
であるものを、文字は画像の右に配置したいとか・・・

補足

質問の意味が解りませんが、テキストの長さは3行以上ですので難しいのですね。
代替案を考えます。
ありがとうございました。

回答No.6

ORUKA1951

≫画像を半分にして下半分の余白を削除した画像を作りました。

こういうこと？？

　もう少し、画像の種類とテキストが何かを・・・・

補足

画像作成ありがとうございます。
最終的に画像のような感じにしたいと思っています。
画像の種類とテキストが何かいうのはどういう意味でしょうか？拡張子？
テキストは普通の文章です。途中で改行が必要な長さの文章です。

回答No.5

ORUKA1951

視覚系ブラウザでの表示の前に、まずきちんとマークアップすることから始めないとダメですよ。
　補足を読ませていただいたところ
「画像AとBはもともとひとつの画像を二分割したものなので、間に文字が入ってしまうと意味がありません。」
　ということでしたら、なぜ、二つに分ける必要があるのですか？

　たとえばある写真があって、その写真の上部分への説明と下部分の説明の間を空けて説明が分かりやすくするとかなら、画像を分割しなくても、それなりの方法があります。
たとえば・・・
<h3>****の説明</h3>
<div class="explanatory">
<p><img>上部分の説明文</p>
<p><img>下部分の説明文</p>
<p>全体の説明</p>
</div>
　また、内容によったら、表を示すtableでも良いでしょう。
<table summary="****の説明" class="explanatory">
<tbody>
<tr>
<td></td><th abbr="写真">写真</th><th abbr="説明文">説明</td>
<th><th><td><img></td><td>上部分の説明</td>
</tr>
<tr>
<td></td><th abbr="写真">写真</th><th abbr="説明文">説明</td>
<th><th><td><img></td><td>下部分の説明</td>
</tr>
</tbody>
</table>

　きちんとマークアップしておいて、その後でディスプレイで見る訪問者には、
┌──┐
│写真│上部の説明
│　　　│
│写真│下部の説明
└──┘
　と表示したいと、考えるべきなのです。

　まず、まったくデザインしなくても、その文書をロボットが読んでも意味が通じるようにマークアップしてください。
　その上でなら、どのようにすればよいかをアドバイスできます。

補足

画像を分割した理由は、途中で画像の幅を変えたいからです。
説明しにくいのですが、画像は円を4分の1にした形をしていて(ホールケーキを切り分けた1ピースのような感じです)、元の画像の横に文字を回り込ませると、下半分の余白が気になってしまい、画像を半分にして下半分の余白を削除した画像を作りました。
その横に文字を表示させたかったのですが、質問のような事になってしまい、意図通りに表示させられませんでした。
このような説明でよろしいでしょうか？

回答No.4

reverie013

連続すみません。
もしかしたら先の書き方では言ってる意味がわかりにくかったかもと思ったので補足です。

改行コードを書かずに並べるというのは↓
<img src="A.gif" alt="a" />　←画像の後に改行コードを入れない
文字Ａ
　　<br />　←文字の後に改行コードを入れる
<img src="B.gif" alt="b" />　←画像の後に改行コードを入れない
文字Ｂ
（例えば）こういうことです。
※ついでにCSSで
img
{
　　vertical-align:top;
}
とか、一部の画像にだけ適用させたければ
imgを.class名に変えてimgにclass指定とかすれば縦位置もご希望通りになるかと。

改行しなかったら画像の右横に文字が表示されたような気がしたので。
並ばなかったら失礼しました。勘違いです。

でも画像をfloat:leftすれば、それは必ず並ぶはずなので
↑では望み通りではなかったら試してみて下さい。

補足

float:leftを入れると画像の下に文字がきてしまいました。
vertical-align:topを入れても同様です。
<div style="float:left">
<img src="画像A" alt="" align="left" style="vertical-align:top">
</div>
文字A
<div style="float:left">
<img src="画像B" alt="" align="left" style="vertical-align:top">
</div>
文字B
改行は文字の部分のみでしています。
試しに文字にもvertical-align:topの指定をしてみましたが、IE7では変わりませんでした。Fire foxでは画像右側の上部に文字が入ったのですが…。

また、画像AとBはもともとひとつの画像を二分割したものなので、間に文字が入ってしまうと意味がありません。
他に方法はないのでしょうか？

回答No.3

reverie013

……ん？
（勘違いしていたらすみません）
画像の隣に文字って、普通に改行コードを入れずに書いたら並びませんでしたっけ。
（縦位置はvertical-alignで指定）
画像幅に関わらず、文字Ａと文字Ｂの頭（横位置）を揃えたいということでしょうか？

その場合は画像ＡとＢ、文字ＡとＢをそれぞれ<div></div>などで括って、
画像を括ってるdivをfloat:left;とかでいけませんか。

試してみていないので確かではないです；すみません。

回答No.2

neko-ten

re_さんの書き方ではブラウザだけでなくウィンドウ幅でも変ってきますね・・・。

行いたいことは
1.画像Aの横に文字A、画像Bの横に文字Bを表示したい
2.文字Aの上端は画像A、文字Bの上端は画像B、それぞれに合わせたい
でしょうか・・・。

1に関しては、画像Aと文字A、画像Bと文字Bそれぞれをブロックでくくってください。

2に関しては、文字A・文字Bそれぞれにスタイルで
vertical-align:top
指定してあげればいいのかと・・・。

＜スタイル指定＞
.moji{
vertical-align:top
}

＜HTML＞
～～略～～
<div>
<img src="画像A" alt="画像A">
<span class="moji">
文字A
</span>
</div>

<div>
<img src="画像B" alt="画像B">
<span class="moji">
文字B
</span>
</div>
～～略～～

もう少しスマートな方法ないかな・・・

補足

ウィンドウ幅を無視するので困っています。
フレームで幅を指定したページですが、今の状態だと横スクロールバーが出てくる状態です。
ウィンドウ幅に合ってくれたらきちんと収まるのですが…。

1と2どちらも惜しいのですが微妙に違います…。
画像AとBはもともとひとつの画像を二分割したものなので、縦に隙間なく並べ、文字Aの上位置を画像Aの上位置にあわせ、文字の位置は文字Aの下であれば上位置はどこでも構いません。

回答No.1

nitto3

<img src="画像A" alt="" align="left">
<img src="画像B" alt="" align="left">
この間にも行変えは必要です。

補足

回答ありがとうございます。
画像に改行を入れると文字も改行されてしまうので、できれば画像Aと文字Aの上位置は揃えたいのですが方法はないのでしょうか…