Css 带/不带横幅的居中布局

我有一个问题：我想要一个有或没有右侧横幅的居中布局（它应该浮动到内容的右侧）。因此，我的css必须以内容+横幅为中心，以防有横幅标签，或者只有内容（内容和横幅有固定的宽度），如果没有横幅标签-有些页面上应该有横幅，有些页面上没有。css应该很好地格式化这两种可能性。 所以它应该是这样的：

<div id="wrapper"><div id="content"></div><div id="sidebanner"></div></div>

我尝试了一些使用浮动和显示的方法：内联，但没有真正起作用：（

试试这个

#wrapper {
    position:relative;
    left:50%;
    margin-left:-500px;
    width:1000px;
}

左边距应为宽度的负一半

对于侧标题，当其存在时，您可以按如下方式将class.wsidebanner添加到内容块：

<div id="content" class="wsidebanner"></div>

我会用下面的

#wrapper {
    width:1000px;
    margin:0 auto; //centering the wrapper
    position:relative; //so we can position the ad absolutely
}
#sidebanner {
     width:120px;
     position:absolute;
     top:0;
     right:-120px; // same as width
}

---

由于CSS无法选择元素的父元素，因此在没有侧栏的情况下，必须向包装器

div

添加一个类

HTML

看

---

注意：IE6不支持相邻的同级选择器。

问题在于，侧标题div会与内容div重叠。

#wrapper {
    width:1000px;
    margin:0 auto; //centering the wrapper
    position:relative; //so we can position the ad absolutely
}
#sidebanner {
     width:120px;
     position:absolute;
     top:0;
     right:-120px; // same as width
}

<div id="wrapper">
    <div id="sidebanner">...</div>
    <div id="content">...</div>
</div> 

<div id="wrapper" class="nosb">
    <div id="content">C</div>
</div>

#wrapper { 
    width: 400px; 
    margin: 0 auto;
}

#wrapper.nosb {
    width: 300px;
}

#content + #sidebanner {
    margin-right: 100px;  
}

#sidebanner {
    float: right;
    width: 100px;   
}