html - 如何在主要内容之后有左右侧边栏？

Question

我发现在 DOM 中的主要内容之后可以实现大量的负百分比边距，但仍然让它们出现在正确的位置:

(DOM顺序固定如下)

<div id="content">The main content</div>
<div id="left">Leftist</div>
<div id="right">Rightist</div>
<div id="footer">Footer</div>

只有我能想出的 CSS 给出左右侧边栏如下:

#content { 
    background: green; 
    float: right; width: 60%; margin-right: 20%; margin-left: -80%;
}
#right { 
    background: blue;
    width: 20%; float: right;
}
#left {
    background: red;
    width: 20%; float: left;
}
#footer {
    background: gray;
    clear: both;
}

但我不完全确定这是实现此目标的首选方法，但它确实有效，所以它有什么问题吗？ (以上is viewable in jsfiddle.net)

那么还有其他方法可以在 main #content 之后使用 CSS 设置#left 和#right 侧边栏吗？

Answer 1

如果您使用绝对定位，您可以将它们放置在您需要的任何位置，而不会出现负边距。只需使用 left: X; 和 right: X; 设置页面上的位置，其中 X 是您的值和度量单位。但是，这样做需要您声明内容的高度，以便您知道将页脚放置在多远的下方。