我的网站中有一张图片是使用以下 CSS 定义的:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
由于 float ,图像显然位于内容的右侧。上边距使图像位于内容中最低悬挂元素的正下方。这看起来不错,但我真的更希望图像在浏览器窗口中的位置尽可能低,以便在一定程度上框住内容。我见过多个使用固定定位来实现此目的的示例,这可行,但是我的内容的最大和最小宽度为 960px;使用固定位置
bottom: 0;
right: 0;
使图像被推到内容之外的最右边,到达浏览器窗口的边缘。是否可以在保持
的同时将图像推到浏览器窗口的底部float: right;
定位?我宁愿不使用 JavaScript 或 jQuery,但我想这是一个选项。提前致谢。
最佳答案
新答案:
<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/
关于html - 如何将 float 的图像推送到浏览器窗口的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19171697/