创建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即可。