2

我发现使用大量负百分比边距可以实现在 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;
}

但我不完全确定这是实现这一目标的首选方式，但它确实有效，那么它有什么问题吗？（以上可在 jsfiddle.net 中查看）

那么有没有其他方法可以在带有CSS的主要#content之后有一个#left和#right侧边栏？

4

1 回答 1

1

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

于 2012-06-03T19:24:40.407 回答