[翻译]标记语言和样式手册 Chapter 12 CSS布局（8）

三人行

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

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

假设加了第二个侧栏,并将它取名# 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 以定位法作出的灵活三栏布局

归纳

我们在这章稍微研究了以CSS规划版面布局是能够达成的效果.本章的目的是提供你发挥的基础,因此示范了两种主要的做法: 浮动和定位.

我希望你能继续深入尝试CSS布局技巧,去掉页面内的嵌套表格,并且换上更多浏览器与设备能读取的灵活的结构化的标记语法.

如果你想知道更多关于CSS版面布局的资讯,那么一定要看看这些资源:

• "The Layout Reservoir" (http://www.bluerobot.com/web/layouts):这是个使用绝对定位制作多栏排版的绝佳示例.
  

• "From Table Hacks to CSS Layout: A Web Designer's Journey" (http://www.alistapart.com/articles/journey/): Jeffrey Zeldman撰写的绝佳教学,记录了建立双栏布局所需的步骤.
  

• "CSS Layout Technoques: For Fun and Profit"(http://www.glish.com/css/): Eric Costello的各种CSS布局资源.
  

• "Little Boxes" (http://www.thenoodleincident.com/tutorials/box_lesson/boxes/html): Owen Briggs编写的许多CSS布局示例的漂亮界面.
  

• "CSS Zen Garden"(http://www.csszengarden.com/): "示范以CSS为基础的设计能达成什么视觉效果". Dave Shea培养的"花园"以单一XHTML文档展示读者投稿的最新CSS设计(当然也包含布局).这是个能看到CSS布局能力极致的神奇网站.