<div id="test">
<img width="300" height="250" alt="実際のheightの値は可変です" />
<span>本のタイトル<br />作者名</span>
</div>
というHTMLソースがあります。
あるＤｉｖタグの中に、imgタグとspanタグがあり、このimgタグのheightは可変です（シチュエーションによって高さが変る）
１・imgとspan（スパンには改行が一つ入ってます）の下辺を揃え、
２・スパンを右に寄せたい
のですが、うまくいきません。
対象ブラウザはファイヤーフォックスとＩＥ７とＩＥ６ですが
自分自身では、
img にvertical-align:text-bottomを入れてみたり、
floatを使ってみたりしましたが駄目でした。
絶対配置ならば解決するだろうと考え、 #test に position:relative をいれ、
span{
display:block;
position:absolute;
right:3px;
bottom:3px;
}
と試みました。FireFoxだとバッチリいったのですがIE６の場合、なぜか、DIV要素をはみ出してしまいます。
bottom:3px; /* 標準準拠ブラウザ用 */
_bottom:8px; /* IE6用 */
とすれば解決できるのですが、ハックはなるたけ使いたくないのでハックを使わずに解決できる方法をご教授ください
よろしくお願いいたします。
No.1
472
58
70pt
可能ならば、div#test に width を指定してやるとか。
57
55
#test {
position : relative ;
width : 100% ;
}
1
1
1
1
1
有難う御座います。試してみます。
他に回答がないようなので、コレで停止いたします。