人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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用 */

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


●質問者: ruijio
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:absolute CSS firefox HTML IE
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GEN111
●70ポイント ベストアンサー

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

#test {
 position : relative ;
 width : 100% ;
}
◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ