0

私の Web サイトには、次の CSS で定義された画像があります。

#settings_big{
    border: none !important;
    margin: auto 0 0 0 !important;
    padding: 0 !important;
    float: right;
}

フロートのため、画像は明らかにコンテンツの右側に配置されます。上部の余白により、画像はコンテンツ内で最も下にぶら下がっている要素の真下に配置されます。これで問題ないように見えますが、ブラウザ ウィンドウのできるだけ低い位置に画像を配置して、コンテンツをいくらかフレーム化することをお勧めします。これを実現するために固定配置を使用する複数の例を見てきましたが、これは機能しますが、コンテンツの最大幅と最小幅は 960px です。の固定位置を使用して

bottom: 0;
right: 0;

画像がコンテンツのすぐ外側のブラウザー ウィンドウの端に押し出されます。を維持したまま、画像をブラウザウィンドウの下部にプッシュすることは可能ですか?

float: right;

ポジショニング？私はむしろ JavaScript や jQuery を使用したくありませんが、それはオプションだと思います。前もって感謝します。

4

2 に答える 2

1

新しい答え:

<div class="container contentCont">
  <div id="content"></div>
</div>
<div class="container imageCont">
  <div id="image"></div>
</div>

CSS の場合:

.container {
  width: 200px;
  margin: 0 auto;
  background: #ccc;
}

.contentCont {
  min-height: 600px;
}

.imageCont {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
}

#image {
  float: right;
  width: 20px;
  height: 20px;
  border: 4px solid red;
}

このJSFiddleのように正しいですか：http://jsfiddle.net/WYX7H/1/

于 2013-10-04T01:37:16.103 に答える