Question

我一直在努力研究如何获得“两栏”类型的网站。好吧，它的主体正确地向右浮动。

通常我会在身体前漂浮并在身体上设置一个边缘，并达到理想的效果。

然而，对于谷歌和搜索引擎优化，我需要更有创意，因为正确的列应该在主要内容之后，应该具有比文本索引列更高的优先级。

尔加。

所以我想出了这个。

批评：

<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有一个负左边距，所以我们可以将新闻列浮动到右边，但是bodyrestrict然后通过用正边距抵消负边距使身体重新内联。 / p>

一些神奇的伏都教jiggery pokery但似乎有效。

有更好的方法吗？

显然我不知道body元素应该是什么（如果我可以帮助的话，我不想沿着JavaScript路线走）。所以我不能设置说100％-200px的宽度或者其他什么（如果可以的话，那就好）。而且我不希望它是固定的宽度，我希望它扩展以填充屏幕。

由于西蒙

Answer 1

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

以下是

的示例

floatting
显示（内联块已经提出）
显示+反向订单（如果您愿意，可以使用内联块）

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

你有显示：flex，但是还不够好，实际上我自己认为：）

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

1 个答案: