創建CSS規則，以兩個一兩個欄佈局工作

Question

這就是我想要做的事：（Larger image）

Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg

當<nav>元素出現在設計，我希望它看起來像下面的例子。 #content div的百分比值是否可以設置？我只是好奇地看到，如果#content（兩者的寬度值不同）使用兩種不同的樣式，這是否可能。
只是浮動似乎並沒有這樣做。

我希望#content在第一個示例中具有百分比值的原因是因爲我在#body中創建了一個背景圖像，該背景圖像創建了外部發光的幻覺。

編輯：我只是通過使用邊距來消除使用寬度百分比的需要。

Answer 1

檢查這裏的例子：http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

你應該做的是設置float:right和width您<nav>元素，並留下#content沒有任何浮動或寬度，只需設置保證金。通過這種方式，內容將嘗試佔據所有給定的空間，並且不會陷入導航。

然後，如果您隱藏<nav>元素，內容將自動調整大小（但也需要從右側刪除填充）。

這是示例代碼：

<style type="text/css"> 
    #container { width:700px; margin:0 auto; border:1px solid #000; } 
    #nav { display:none; } 
    .double #nav { width:10%; float:right; display:block; } 
    #content { margin-right:10%; border-right:1px solid #000; } 
</style> 

<div id="container" class="double"> 
    <div id="nav">nav content</div> 
    <div id="content">page content</div> 
</div> 

現在，如果從容器中取出元素class="double"你會看到的內容是否正確調整採取90％的給定的空間。如果你想取得100％的成績 - 只需在#content風格之前添加.double即可。