兩列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 - 右列固定寬度，左列可變

回答

相關問題