Question

我的网站中有一个用以下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，但我认为这是一个选项。提前谢谢。

Answer 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/

Answer 2

以下内容可能与您的需求接近。

假设您的页面布局模糊地看起来像以下HTML：

<div class="wrapper">
    <p>some words...</p>
    <div class="slot">
        <img src="http://placehold.it/200x200">
    </div>
</div>

应用以下CSS：

.wrapper {
    width: 600px;
    height: 600px; /* for demo only, not critical... */
    margin: 0 auto;
    border: 1px solid blue;
}
.slot {
    text-align: right;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -301px;
    width: 600px;
    border: 1px dotted blue;
}
.wrapper img {
    vertical-align: top;
}

请参阅演示：http://jsfiddle.net/audetwebdesign/6Xnxj/

如果您不知道图像的宽度（或者您不想指定它），创建一个与父元素宽度匹配的包装器，并将position: fixed应用于它。

然后，图像可以浮动或在固定块内向右文本对齐。

然后可以将固定块定位到左侧和底部，并使用margin-left 保持中心。

如何将浮动的图像直接推到浏览器窗口的底部？

2 个答案: