在網站左側定位橫幅並將橫幅對齊到內容

Question

我將內容設置爲1024px寬度並與中心對齊。現在我想要在左邊的橫幅。由於橫幅的尺寸可能不同，我必須將橫幅對齊到右側。橫幅包裹着一個錨點。在我的例子中，我使用了div而不是圖片。

HTML：

<div id="content"> 
    <div id="banner"> 
     <a href="#"><div id="background">banner</div></a> 
    </div> 
    <div id="maincontent">  
     SSSSSSSSSSSSSSSSSSSSSSSSS 
     OOOOOOOOOOOOOOOOOOOOOOOOO 
     MMMMMMMMMMMMMMMMMMMMMMMMM 
     EEEEEEEEEEEEEEEEEEEEEEEEEEE 
     CCCCCCCCCCCCCCCCCCCCCCCCC 
     OOOOOOOOOOOOOOO 
     NNNNNNNNNNNNNNNNNNNNNNN 
     TTTTTTTTTTTTTTTTTTTTT 
     EEEEEEEEEEEEEEEEEEEEE 
     NNNNNNNNNNNNNNNNNNNNNNNNNN 
     TTTTTTTTT 
    </div> 
</div> 

CSS：

#content { 
    width: 400px; 
    margin: 0 auto;  
    background-color: red; 
    position: relative; 
} 

#background { 
    width: 20px; 
    height: 100px;  
    background-color: blue; 
    color: white; 
} 

#banner{ 
    position: absolute; 
    left: -200px; 
    width: 200px; 
    height: 100px; 
    background-color: yellow;  
    text-align: right; 
} 

JSFiddle

text-align: right;不會使的伎倆。

Answer 1

從#background