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

Question

这就是我想做的：

示例 http://img689.imageshack .us/img689/5761/cssautowidth.th.jpg （大图。）

当

元素存在于设计中，我希望它看起来像下面的示例。当 #content div 设置了百分比值时是否可以执行此操作？我只是好奇是否可以在不使用两种不同样式的 #content 的情况下实现这一点（两者都具有不同的宽度值。）
光靠漂浮似乎是不行的。

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

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

Answer 1

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

您应该做的是在

元素上设置 float:right 和 width ，并保留 < code>#content 没有任何浮动或宽度，只需设置边距。这样，内容将尝试占据所有给定空间，并且不会“落入”导航中。

然后，如果您隐藏

元素，内容将自动调整大小（但您还需要删除右侧的填充）。

这是示例代码：

<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% - 只需在 style 中的 #content 之前添加 .double 即可。