实例解析CSS网页布局原理(2)

可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则:

并且应用如下的CSS:

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }

你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

实在是太容易了!然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，可以为HTML增加“navigation2”块并且应用如下CSS:

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }

绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，经常得放弃在下面放置任何事物如脚注的希望。如果真的要做，与其绝对定位它们，不如浮动它们。

浮动

浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。

浮动经常用在定位一个页面内的小