我一直在尝试制作一个"两列式"网站,主体部分带有右侧浮动的右侧栏。
通常情况下,我会在主体前面浮动,并在主体上设置right margin来实现所需效果。
然而,由于Google和SEO的缘故,为了文本索引,右栏应该在主要内容之后,而主要内容应该比栏目具有更高的优先级。
所以,我想出了以下解决方案。请评价:
通常情况下,我会在主体前面浮动,并在主体上设置right margin来实现所需效果。
然而,由于Google和SEO的缘故,为了文本索引,右栏应该在主要内容之后,而主要内容应该比栏目具有更高的优先级。
所以,我想出了以下解决方案。请评价:
<div id="bodycontainer" style="border:1px solid #0f0; width:800px; margin-left:auto; margin-right:auto; overflow:hidden;">
<div id="bodyoffset" style="border:1px solid #f00; width:100%; margin-left:-210px; overflow:hidden; float:left;">
<div id"bodyrestrict" style="border:1px solid #ff0; margin-left:210px;">
Main Column<br/>
Some text goes here.<br/><br/>
I want this column to fill up the remainder space that is filled by the...
</div>
</div>
<div id="newscolumn" style="border:1px solid #00f; width:200px; float:left;">
...Right Column
</div>
<p style="clear:both;"></p>
我理解这个做法,bodycontainer控制整体宽度,bodyoffset有一个负的左边距以便我们可以将newscolumn浮动到右边,但是bodyrestrict通过用正的margin抵消负的margin来使body回到一行内。
这似乎是一种神奇的方法,但它似乎起作用了。
是否有更好的方法呢?
显然,我不知道body元素实际上应该是什么(如果可能的话,我不想使用JavaScript)。所以我不能设置一个宽度为100% - 200px或者其他什么(如果可以的话那就太好了)。而且我也不想设置固定宽度,我希望它能够扩展以填满屏幕。
谢谢 Simon