3

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

通常我会漂浮在身体之前并在身体上设置一个边距并实现所需的东西。

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

嘎。

所以我想出了这个。

请批评：

<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 然后通过用正边距偏移负边距使正文回到内联。

一些神奇的巫毒巫术，但它似乎奏效了。

有没有更好的办法？

显然，我不知道 body 元素实际上应该是什么（如果可以的话，我不想走 JavaScript 路线）。所以我不能设置 100%-200px 或其他的宽度（如果可以的话，那就太好了）。而且我不希望它固定宽度，我希望它扩大以填满屏幕。

谢谢西蒙

4

1 回答 1

0

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

这是示例

  1. 浮动
  2. 显示（已经提出了内联块）
  3. display +reverse order (如果你愿意，可以使用 inline-block)

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

您也有 display:flex ，但在我自己看来实际上实现得还不够好:)

于 2013-06-18T17:05:46.137 回答