在動態元素的右下角顯示圖像

我有一個「文章框」，用於有兩個不同寬度的幾個不同的頁面。我想在每個框的右上角顯示一張圖片。我怎麼能使用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

來源

2012-10-03 dodgerogers747

'@'與CSS有什麼關係？ –

@DavidThomas這可能是一個SASS mixin –

我有一個稱爲文章框的CSS樣式，因爲我想繼承大多數樣式而不必再次寫入，我使用extend來繼承屬性，然後根據需要覆蓋。 – dodgerogers747

.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-03 16:49:33

哦，我的天啊佐爾坦你是個傳奇人物！和速度！ – dodgerogers747

你可以看看CSS的float財產。它也會自動包裹圖像（或任何塊元素）。

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

P.S.您可能還必須使用clear css屬性，但這取決於DOM的性質。請閱讀float和clear屬性

來源

2012-10-03 17:00:34 Aman

在動態元素的右下角顯示圖像

回答

相關問題