html - 两列 CSS - 右列固定宽度，左列可变

Question

我一直在努力研究如何获得“双栏”类型的网站。嗯，确实是主体，右边的一列向右浮动。

通常我会漂浮在 body 之前并在 body 上设置 margin-right 并实现所需的结果。

但是对于 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 有一个负的左边距，所以我们可以将新闻栏 float 到右边，但是 bodyrestrict 然后通过用正边距抵消负边距来使正文返回内联。

一些神奇的巫术 jiggery pokery，但它似乎有效。

有没有更好的办法？

显然，我不知道 body 元素实际上应该是什么(如果可以的话，我不想走 JavaScript 路线)。所以我不能将宽度设置为 100%-200px 或其他(如果可以的话最好)。我不希望它的宽度固定，我希望它扩展以填满屏幕。

谢谢西蒙

Answer 1

float 不需要有趣的负边距？或者我不明白你的意思。

这里是

的例子

1. 漂浮
2. 展示(inline-block 已经被提出)
3. 显示 +reverse order(如果你愿意，可以使用 inline-block)

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

你也有 display:flex ，但在我看来还不够好 :)