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

我一直在努力解决如何获得“双列”类型的网站。嗯，它确实是一个正确的右列浮动的主体。两列CSS - 右列固定宽度，左列可变

通常情况下，我会浮在身体之前，并在身体上设置一个边缘并实现所需的功能。

但是，对于Google和SEO，我需要更具创造性，因为右列应该位于主要内容之后，该内容应比文本索引列具有更高的优先级。

Gah。

所以我想出了这个。

批判请：

<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则带来通过利用正边际来抵消负边界，身体背靠内线。

一些魔法巫术jiggery pokery，但它似乎工作。

有没有更好的方法？

显然我不知道body元素应该是什么样的（如果我可以帮助的话，我不想下去JavaScript路径）。所以我不能设置100％-200px或其他什么的宽度（如果可以的话，也是好的）。我不希望它是固定的宽度，我希望它扩大到填满屏幕。

感谢西蒙

来源

2013-06-18 Simon

这是否意味着左列唱歌剧？ –

我想出了这个：http://jsfiddle.net/P7vsu/1/。另外，我将你写的东西复制到小提琴中：http://jsfiddle.net/KhYLh/。尽管你想要的东西看起来好像很多，但如果你能管理数学，那就去做吧。 – asafreedman

你的方法非常好，有没有按预期工作的东西？ – ProfileTwist

floatting不需要搞笑负利润率？或者我不明白你的意思。

这里的例子有

floatting
显示（inline-block的已提出）
显示+反序（可与，如果你想inline-block的）

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

您有显示：flex也是，但还不够好实现实际上在我自己的意见:)

来源

2013-06-18 17:05:46

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

回答

相关问题