0

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
4

2 に答える 2

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;  
    }       
}
于 2012-10-03T16:49:33.523 に答える
1

floatCSSのプロパティを調べることができます。また、画像 (または任意のブロック要素) の周囲にテキストが自動的に折り返されます。

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

PS clearcss プロパティも使用する必要がある場合がありますが、それは DOM の性質によって異なります。floatとclearプロパティを読んでください

于 2012-10-03T17:00:34.323 に答える