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

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）

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

Answer 1

如果使用绝对定位，它将允许您将它们放置在任何需要的位置而没有负边距。只需使用left: X;和right: X;设置页面上的位置，其中X是您的值和度量单位。但是，这样做会要求您声明内容的高度，以便了解页脚放置的距离。