10

私は奇妙な問題に遭遇しました。DIV をコンテナーとして使用し、この DIV にイメージを入れます。この画像を垂直に下に揃えたいと思います。次のコードは機能します。

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

しかし、css コードの「位置: 相対」を「位置: 絶対」に変更すると、画像を下に揃えることができなくなります。これは Firefox3 のバグですか？どうすればこの問題を解決できますか?

私の現在の解決策は次のとおりです。

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

しかし、私はこの解決策が好きではありません。

4

2 に答える 2

8

簡単な答え：変更

top: 60px;

に

bottom: 60px;

長い答え：

宣言position: absoluteは、要素をどこにでも取り出し、静的と宣言されていない最も内側の要素を基準にして配置します。他の要素の配置に参加しなくなったため、テーブルセルとして機能しなくなりました（宣言は効果がありません）。top: 10pxさらに、それを含む要素の上部からそれだけの距離を置くことを意味するなどの宣言。

要素をとして宣言すると、「要素を現在の位置から上から10px移動する」position: relativeなどの宣言が行われます。top: 10px他の要素とオーバーラップするように宣言された要素は可能ですが、元の位置が他の要素の配置を決定することを覚えておく必要があります。

これがあなたの質問に答えることを願っています。

于 2009-10-22T18:25:21.120 に答える
2

position:relative; を設定することもできます。これにより、バナー (#banner position:relative; および img position:absolute) が作成され、絶対位置が bottom:0 に設定され、コンテナーの下部に配置されます。ページ全体の場合は、コンテナーの幅と高さを 100% に設定し、本文または div の余分なパディング/マージンを削除します。

于 2009-10-22T18:51:18.733 に答える