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

我发现有严重的负面％的利润率可以达到不舍和侧条后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以上）

那么还有其他的方法可以在主要#content与CSS之后有#left和#right侧栏吗？

来源

2012-05-18 Ciantic

你根本不需要边距。 http://jsfiddle.net/DryJE/2/ – Sparky

@ Sparky672，没有。 DOM的顺序不应该改变。这就是全部重点！屏幕阅读器必须先阅读＃内容。 – Ciantic

通常，一列中的内容与另一列中的内容并不重要（例如，导航与文章）。在页面上有更高的相关内容（在标记中）有助于搜索引擎找到你。这就是为什么像960.gs这样的网格系统具有重新排序网格元素的推和拉功能。 – Matt

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

来源

2012-06-03 19:24:40

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

回答

相关问题