CSS设计一个三列布局的页面

探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么，我们在写CSS之前首先引入reset.css，我使用的是淘宝的reset。

01 /*

`02`	`KISSY CSS Reset`

03 */

`04`	`/ 清除内外边距 /`

`05`	`body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,` `/* structural elements 结构元素 */`

`06`	`dl, dt, dd, ul, ol, li,` `/* list elements 列表元素 */`

`07`	`pre,` `/* text formatting elements 文本格式元素 */`

`08`	`form, fieldset, legend, button, input, textarea,` `/* form elements 表单元素 */`

`09`	`th, td` `/* table elements 表格元素 */` `{`

`10`	`margin:` `0;`

`11`	`padding:` `0;`

12 }

`13`	`/ 设置默认字体 /`

14 body,

`15`	`button, input, select, textarea` `/* for ie */` `{`

`16`	`font:` `12px/1.5` `tahoma,` `arial, \5b8b\4f53,` `sans-serif;`

17 }

`18`	`h1, h2, h3, h4, h5, h6` `{` `font-size:` `100%; }`

`19`	`address, cite, dfn, em, var {` `font-style:` `normal; }` `/* 将斜体扶正 */`

`20`	`code, kbd,` `pre, samp {` `font-family:` `courier` `new,` `courier,` `monospace; }` `/* 统一等宽字体 */`

`21`	`small` `{` `font-size:` `12px; }` `/* 小于 12px 的中文很难阅读，让 small 正常化 */`

`22`	`/ 重置列表元素 /`

`23`	`ul, ol {` `list-style:` `none; }`

`24`	`/ 重置文本格式元素 /`

`25`	`a {` `text-decoration:` `none; }`

`26`	`a:hover {` `text-decoration:` `underline; }`

`27`	`sup {` `vertical-align:` `text-top; }` `/* 重置，减少对行高的影响 */`

`28`	`sub` `{` `vertical-align:` `text-bottom; }`

`29`	`/ 重置表单元素 /`

`30`	`legend {` `color:` `#000; }` `/* for ie6 */`

`31`	`fieldset, img {` `border:` `0; }` `/* img 搭车：让链接里的 img 无边框 */`

`32`	`button, input, select, textarea {` `font-size:` `100%; }` `/* 使得表单元素在 ie 下能继承字体大小 */`

`33`	`/* 注：optgroup 无法扶正 */`

`34`	`/ 重置表格元素 /`

`35`	`table {` `border-collapse:` `collapse;` `border-spacing:` `0; }`

声明DTD：

`1`	`<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`

使用display：inline-block属性

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。我们知道在IE6.0以及IE7.0是使用了一个has layout的概念。使用display：inline-block仅仅触发了块状元素的has layout属性。而DIV本身就是块状元素，所以在IE<8.0 下依然会出现换行的情况。

解决问题：先将块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout去hack IE7.0-;

`1`	`div{display:inline-block;zoom:1;*display:inline;}`

HTML

`1`	`<div` `class="content">`

`2`	`<div` `class="subMenuLeft"></div>`

`3`	`<div` `class="mainBoxCenter">`

4 </div>

`5`	`<div` `class="infoRight">`

6 </div>

7 </div>

CSS

`01`	`div.content{`

`02`	`padding-left:150px;`

`03`	`padding-right:200px;`

04 }

`05`	`div.subMenuLeft,div.mainBoxCenter,div.infoRight{`

`06`	`display:inline-block;`

`07`	`zoom:1; display:inline;/fix ie<8*/`

08 }

`09`	`div.mainBoxCenter{`

`10`	`width:100%;`

11 }

`12`	`div.subMenuLeft{`

`13`	`width:150px;`

`14`	`margin-left:-150px;`

15 }

`16`	`div.infoRight{`

`17`	`width:300px;`

`18`	`margin-right:-300px;`

19 }

使用float负边距的布局

该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。

由此我们知道可以设置三个DIV默认全部向左浮动，然后设置后两个DIV的margin属性让其显示到必要的位置。

`1`	`<div` `class="content">`

`2`	`<div` `class="mainBoxCenter">`

3 </div>

4 </div>

`5`	`<div` `class="subMenuLeft">`

6 </div>

`7`	`<div` `class="infoRight">`

8 </div>

设置div.content的宽度为100%，充满整个窗口，并向左浮动；
设置div.mainBoxCenter的左外边距以及右外边距分别等于要显示的两个DIV的宽度；
设置div.subMenuLeft向左浮动，并且margin-left:100%;这样subMenuLeft偏移到屏幕的最左方；
设置div.infoRight向左浮动，并且margin-left值为自身的宽度，这样infoRight便偏移到屏幕的右侧。

view source

print ?

`01`	`div.content{`

`02`	`width:100%;`

`03`	`float:left;`

04 }

`05`	`div.subMenuLeft,div.infoRight{`

`06`	`float:left;`

07 }

`08`	`div.subMenuLeft{`

`09`	`width:150px;`

`10`	`margin-left:-100%;`

11 }

`12`	`div.infoRight{`

`13`	`width:200px;`

`14`	`margin-left:-200px;`

15 }

`16`	`div.mainBoxCenter{`

`17`	`margin-left:150px;`

`18`	`margin-right:200px;`

19 }