创建适用于一列和两列布局的 CSS 规则

Question

这就是我想要做的：

Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg (Larger image.)

当<nav> 元素出现在设计中时，我希望它看起来像下面的示例。在#content div 设置了百分比值时是否可以执行此操作？我只是想知道如果不为#content 使用两种不同的样式（两者都具有不同的宽度值），这是否可行。
只是漂浮似乎不行。

我希望#content 在第一个示例中具有百分比值的原因是因为我在#body 中有一个背景图像，它会产生外部发光的错觉。

编辑：我只是通过使用边距消除了使用宽度百分比的需要。

Answer 1

在此处查看示例：http://css.maxdesign.com.au/floatutorial/tutorial0816.htm

您应该做的是在您的<nav> 元素上设置float:right 和width，并让#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 即可。