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

方法C:浮动主内容

<div id="header">
  ...页头内容...
</div>
<div id="content">
  ...主内容...
</div>
<div id="sidebar">
  ...侧边栏...
</div>
<div id="footer">
  ...页尾内容...
</div>

还有个值得一提的方法,只需要用一个float属性,同时标记源代码仍然可以将主内容的<div>放在侧边栏之前.

只要将主内容的<div>浮动到左侧,并且为它设定小于100％的宽度,如此一来就能在右侧留下足够空间摆放侧边栏.

CSS内容

方法C需要的CSS内容再简单不过了,"一个float属性",内容区希望使用的宽度,以及两栏之间留下的小边界.

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66％;
  }
#sidebar {
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

请注意我们并不需要定义侧边栏的宽度,因为它会自动填满主内容<div>用剩下的空间(在这个例子中是34％).

悲惨的背景

图12-5就是以浏览器查看的成果,哦喔!在某些常用浏览器里,侧边栏的背景颜色会出现在主内容区底下,由于侧边栏并未制定宽度,因此它想扩到与浏览器视窗一样宽.

图12-5 浮动内容,但是侧边栏的背景颜色透了出来

这个部分只要我们能在侧边栏左边加上宽度与内容区相同的外边界便可以避开这个问题.实际上我们会把外补丁设的稍微大一点,以便在两栏之间留下一点空白.

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66％;
  }
#sidebar {
  margin-left: 70％;
  background: #999;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

简单朴素

或者是,如果涉及不需要用到背景色的话,那就不必设定边界了,图12-6是去掉整个#sidebar声明,在为主内容<div>加上一点右外补丁之后的结果.此时两栏会共用页面预设的背景色.

图12-6 不使用背景色的浮动内容

CSS则能缩减成:

#header {
  padding: 20px;
  background: #ccc;
  }
#content {
  float: left;
  width: 66％;
  margin-right: 6％;
  }
#footer {
  clear: left;
  padding: 20px;
  background: #eee;
  }

除了加上左外补丁(或是省去背景色)之外,还有个使用背景图片的替代做法能让分栏具备背景色彩,我稍后会在本章的" 技巧延伸 "单元里提示这个小秘密.

除了使用float属性之外,也能用定位制造出分栏布局,让我们看看最后一个选择,方法D.