标记语言——CSS布局(7)

三人行

如果想做三栏布局的话该怎么办?没问题,而且在使用绝对定位时很容易加入.只需要为主内容,也为加上左外补丁,大小足够容纳第三栏即可.

另一个侧边栏能够放在标记源代码之内任何地方,因为会需要再度使用绝对定位进行布局.

假设加了第二个侧栏,并将它取名# sidecolumn,接着以下面这段CSS为它空出位置,再把它放进去.

body {

  margin: 0;

  padding: 0;

  }

#header {

  height: 40px;

  background: #ccc;

  }

#content {

  margin-right: 24%;

  margin-left: 24%;

  }

#sidecolumn {

  position: absolute;

  top: 40px;

  left: 0;

  width: 20%;

  background: #999;

  }

#sidebar {

  position: absolute;

  top: 40px;

  right: 0;

  width: 20%;

  background: #999;

  }

#footer {

  margin-right: 24%;

  margin-left: 24%;

  padding: 20px;

  background: #eee;

  }

刚才完成的部分是在主内容,页尾区空出左外补丁(避免重叠),与之前做右侧边栏一样,接着以绝对定位法放进新的#sidecolumn ,将它放在距离上边缘40像素,距离左边缘0像素的位置.

你有留意我们稍微修正了宽度以容纳第三栏吗?由于我们使用百分比,因此这个布局会随着浏览器的宽度缩放,或者也可以为任何一栏指定像素宽度,以便使布局宽度固定下来.

图12-10是用浏览器查看这个示例的效果,一份以CSS绝对定位完成的灵活三栏布局.

图12-10 以定位法作出的灵活三栏布局