将横幅定位在网站的左侧并将横幅与内容对齐答案

【问题标题】：Positioning a banner on the left side of a site and align banner right to the content将横幅定位在网站的左侧并将横幅与内容对齐
【发布时间】：2012-11-23 23:15:46
【问题描述】：

我将内容设置为 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; 不会成功。

【问题讨论】：

标签： html css banner

【解决方案1】：

从#background 中删除width: 20px

【讨论】：

在这个例子中它可以工作，因为我使用div 作为背景。如果我在示例中切换到图像，它似乎也可以工作。但实际上我有一个没有宽度和高度属性的图像。在这里它不起作用。你知道为什么吗？
我发现了错误。在我的真实世界场景中，#banner 没有宽度。所以它不起作用。