Html “粘贴”图像到页面右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13933051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'Stick' image to right side of the page
提问by Steef
My last question wasn't very clear, I'll give it another try.
我的最后一个问题不是很清楚，我再试一次。
On my Tumblr blog (http://anti-standard.tumblr.com) you can see an image (the image says 'ANTI STANDARD') wich is stuck to the left side of the page. However, I want the image to be stuck to the right side of the page. How can I do this? I have the following CSS code:
在我的 Tumblr 博客 (http://anti-standard.tumblr.com) 上，您可以看到一张贴在页面左侧的图片（图片上写着“反标准”）。但是，我希望图像粘在页面的右侧。我怎样才能做到这一点？我有以下 CSS 代码：
.image-container1 {
width:100%;
position:absolute;
float:right;
right:0;
clear:both;
}
.image-container2 {
background:url('http://avare.nl/tumblr/as.png') no-repeat fixed;
background-size:55px 500px;
height:500px;
width:55px;
}
And the following HTML code right below the 'body' tag:
以及“body”标签正下方的以下 HTML 代码：
<div class="image-container1">
<div class="image-container2">
</div>
</div>
I hope you guys can help me out with this one.
我希望你们能帮我解决这个问题。
回答by Sowmya
Add float:rightto .image-container2and remove fixed from the background
添加float:right到.image-container2从背景中消除固定
.image-container2 {
background:url('http://avare.nl/tumblr/as.png') no-repeat;
background-size:55px 500px;
height:500px;
width:55px; float:right;
}?
Or in easy way do like this
或者以简单的方式这样做
HTML
HTML
<div class="image-container1">lorem ...</div>
CSS
CSS
html, body{height:100%}
.image-container1 {
width:100%;
background:url('http://avare.nl/tumblr/as.png') no-repeat right top;
background-size:55px 500px;
height:100%
}
?DEMO
? 演示
