html - 创建适用于一列和两列布局的 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

你应该做的是设置float:right和 width在你的 <nav>元素，然后离开 #content没有任何 float 或宽度，只需设置边距。这样内容将尝试占据所有给定的空间并且不会“落入”导航。

然后，如果你隐藏<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。