css - 带/不带侧边栏的居中布局

Question

我遇到了这个问题:我想要一个带有或不带有右侧边栏的居中布局(它应该 float 到内容的右边)。所以我的 css 必须居中内容 + sidebanner 以防万一有一个 sidebanner 标签或只是内容(内容和 sidebanner 有一个固定的宽度)如果没有 sidebanner 标签 - 有些页面应该有 sidebanner 和一些它不是。 css 应该很好地格式化这两种可能性。 所以它应该是这样的:

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

我用 floats 和 display:inline 尝试了一些东西，但没有真正解决 :(

Answer 1

试试这个...

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

margin-left 应该是宽度的负一半。

对于边栏，当它存在时，您可以将类 .wsidebanner 添加到内容 block ，如下所示:

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

CSS 将是:

#content {
    background-color:#199;
}

.wsidebanner {
    float:left;
    width:800px;
}

#sidebanner {
    background-color:#919;
    float:right;
    width:200px;
}