在动态元素的右上角显示图像

时间:2012-10-03 16:46:30

标签: css positioning image

我有一个“文章框”,用于两个不同宽度的不同页面。我有一个图像,我想在每个框的右上角显示。我如何使用css在每个框的右上角正确显示图像?

我提供了以下css代码,但事先谢谢。

.wide-article-box {
    @extend .article-box;
        padding: 20px;
        max-width: 900px;

    #badge {
        position: relative;
        max-width:260px;    
    }

    #badge img {
            position: absolute;
        border-width: 0px;  
    }       
}

并在视图中

    <div class="wide-article-box">
     <!--text etc -->
      <div id="badge">  
        <%= image_tag "BLH_BADGE.png" %>            
      </div>
       </div

2 个答案:

答案 0 :(得分:1)

.wide-article-box {
    @extend .article-box;
        padding: 20px;
        max-width: 900px;
        position: relative;

    #badge {
        position: absolute;
            top: 0;
            right: 0;
        max-width:260px;    
    }

    #badge img {
        border-width: 0px;  
    }       
}

答案 1 :(得分:1)

您可以查看CSS的float属性。它还会自动在图像(或任何块元素)周围包装文本。

#badge {
    float: right;
    max-width: 260px;    
}

P.S。您可能还必须使用clear css属性,但这取决于DOM的性质。只需阅读floatclear属性

即可