两栏CSS布局-右侧固定宽度，左侧可变

Question

我一直在尝试制作一个"两列式"网站，主体部分带有右侧浮动的右侧栏。

通常情况下，我会在主体前面浮动，并在主体上设置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

- Simon

---

这是否意味着左列唱歌剧？ - Derek Henderson

我想到了这个：http://jsfiddle.net/P7vsu/1/。另外，我把你写的东西复制到了一个fiddle中：http://jsfiddle.net/KhYLh/。虽然看起来需要经过很多步骤才能得到你想要的结果，但如果你能处理好数学问题，那就试试吧。 - asafreedman

你的方法完全没问题；有什么不符合预期的地方吗？ - ProfileTwist

谢谢ProfileTwist - 我只是想知道这是否是一种可以接受的编程方式，或者我是否错过了一些明显的东西。asafreedman，也感谢您的回答...但我确实喜欢使用精确像素宽度来设置列。百分比更容易，因为如果一个是10％，另一个就是90％。但如果一个是100px，那么你该如何使另一个填满屏幕！ - Simon

Answer 1

浮动不需要有趣的负边距吗？还是我没有理解你的意思。

这里有一些例子：

1. 浮动
2. 显示（inline-block已经被提出）
3. 显示+反向顺序（如果您愿意，可以使用inline-block）

: http://codepen.io/anon/pen/xnlGa

您也可以使用display:flex，但实际上在我自己的观点中尚未完全实现好 :)

- G-Cyrillus