这就是我想要做的:
Example http://img689.imageshack.us/img689/5761/cssautowidth.th.jpg ( Larger image .)
当 <nav>
元素存在于设计中,我希望它看起来像下面的示例。是否可以在 #content
时执行此操作? div 设置了百分比值?我只是想知道如果不为 #content
使用两种不同的样式是否可行(两者都具有不同的宽度值。)
只是漂浮似乎并不能做到这一点。
我想要 #content
的原因在第一个例子中有一个百分比值是因为我在 #body
中有一个背景图像这会产生外发光的错觉。
编辑:我只是通过使用边距来消除使用宽度百分比的需要。
最佳答案
在此处检查示例: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。
关于html - 创建适用于一列和两列布局的 CSS 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1737279/