将图像“粘贴”到页面右侧

【问题标题】：'Stick' image to right side of the page将图像“粘贴”到页面右侧
【发布时间】：2012-12-18 20:38:26
【问题描述】：

我最后一个问题不是很清楚，我再试一次。

在我的 Tumblr 博客 (http://anti-standard.tumblr.com) 上，您可以看到一张贴在页面左侧的图片（图片上写着“ANTI STANDARD”）。但是，我希望将图像粘贴到页面的右侧。我怎样才能做到这一点？我有以下 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;
}

下面的 HTML 代码就在“body”标签的正下方：

<div class="image-container1">
    <div class="image-container2">
    </div>    
</div>

我希望你们能帮我解决这个问题。

【问题讨论】：

标签： html css image position

【解决方案1】：

将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;
}

DEMO

或者以简单的方式这样做

HTML

<div class="image-container1">lorem ...</div>

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

【讨论】：