我该如何将正好浮动到浏览器窗口底部的图像？

我在我的网站上的图像是与下面的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，但它是我想的选项。提前致谢。

来源

2013-10-04 Sloth Armstrong

所以想要的图像的底部边缘是在视口的底部，并且所述图像的右边缘与网页的右边缘重合（其具有960像素的宽度和中心（？））？ –

添加一些HTML将有助于... –

@MarcAudet是的，这是正确的。是的，网页居中。我可以用jQuery做到这一点，但我宁愿不要。此外，HTML不会有太大帮助，这就是为什么我不包含任何内容。这只是一个居中div的简单图像。让我知道你是否还想要它。 –

下可能接近你所需要的。

假设你的页面布局隐约看起来像下面的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。

的图像然后可以任一浮动或文本对准于固定块内的权利。

固定块然后可以位于左侧和底部，以及使用利润率左使其保持居中。

来源

2013-10-04 01:44:02

这是一个非常简单的解决方案，谢谢！ –

新的答案：

<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-04 01:37:16 russtuck91

这不起作用，'position：fixed'的盒子偏移总是相对于视口而不是父元素。 –

我会被诅咒的，你是对的。如何解决这个问题：http://jsfiddle.net/WYX7H/1/ – russtuck91

你的更新版本的作品，其实，类似于我发布的，我们都提出了相同的想法，一些细节略有不同，但是这个概念很好！ –

我该如何将正好浮动到浏览器窗口底部的图像？

回答

相关问题