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

【问题标题】：Display image in right hand corner of dynamic element在动态元素的右上角显示图像
【发布时间】：2012-10-04 01:00:34
【问题描述】：

我有一个“文章框”，用于具有 2 个不同宽度的几个不同页面。我有一个图像，我想在每个框的右上角显示。如何使用 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

【问题讨论】：

@ 与 CSS 有什么关系？
@DavidThomas 这可能是一个 SASS mixin
我有一个名为 article-box 的 CSS 样式，因为我想从中继承大部分样式而不必再次编写它，所以我使用 extend 来继承属性，然后根据需要覆盖。

标签： css positioning image

【解决方案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;  
    }       
}

【讨论】：

【解决方案2】：

您可以查看 CSS 的 float 属性。它还会自动将文本环绕在图像（或任何块元素）周围。

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

附：您可能还必须使用 clear css 属性，但这取决于 DOM 的性质。只需阅读 float 和 clear 属性

【讨论】：