0

我的网站中有一个使用以下 CSS 定义的图像：

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

由于浮动，图像显然位于内容的右侧。上边距使图像位于内容中最低悬挂元素的正下方。这看起来不错，但我真的希望图像在浏览器窗口中尽可能低，以便在某种程度上构成内容。我见过多个使用固定定位来实现这一点的示例，这会起作用，但是我的内容的最大和最小宽度为 960 像素；使用固定位置

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 回答
0

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

假设你的页面布局看起来像下面的 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 使其居中。

于 2013-10-04T01:44:02.363 回答