CSSについて質問です。


<div id="test">

<img width="300" height="250" alt="実際のheightの値は可変です" />
<span>本のタイトル<br />作者名</span>

</div>

というHTMLソースがあります。

あるDivタグの中に、imgタグとspanタグがあり、このimgタグのheightは可変です(シチュエーションによって高さが変る)


1・imgとspan(スパンには改行が一つ入ってます)の下辺を揃え、
2・スパンを右に寄せたい

のですが、うまくいきません。

対象ブラウザはファイヤーフォックスとIE7とIE6ですが

自分自身では、

img にvertical-align:text-bottomを入れてみたり、
floatを使ってみたりしましたが駄目でした。

絶対配置ならば解決するだろうと考え、 #test に position:relative をいれ、

span{
display:block;
position:absolute;
right:3px;
bottom:3px;
}

と試みました。FireFoxだとバッチリいったのですがIE6の場合、なぜか、DIV要素をはみ出してしまいます。

bottom:3px; /* 標準準拠ブラウザ用 */
_bottom:8px; /* IE6用 */

とすれば解決できるのですが、ハックはなるたけ使いたくないのでハックを使わずに解決できる方法をご教授ください
よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録:2007/06/19 14:55:34
  • 終了:2007/06/21 00:28:11

ベストアンサー

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/06/19 15:32:18

ポイント70pt

可能ならば、div#test に width を指定してやるとか。

#test {
  position : relative ;
  width : 100% ;
}
id:ruijio

有難う御座います。試してみます。

他に回答がないようなので、コレで停止いたします。

2007/06/21 00:26:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません