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

时间:2012-12-18 12:30:14

标签: html css image position

我的上一个问题不是很清楚,我会再试一次。

在我的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>

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

1 个答案:

答案 0 :(得分: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