16个非常好的CSS基本布局的例子

单行单列

单行1:左上角浮动，宽度固定。#内容{左侧浮动：padding: 10pxmargin: 20px背景： # FFF；border: 5px固体# 666；宽度： 400 px；/* ie5win fudge开头*/voice-family : ' \ \ ' } \ \ ' '；语音家庭：继承；宽度： 370 px；} htmlbody #内容{ width: 370px/* ie5 win foggy ends */}

单行2:固定在左上角，宽度固定，使用绝对定位。# content { position : absolute；top: 0pxleft: 0pxpadding: 10pxmargin: 20px背景： # FFF；border: 5px固体# 666；宽度： 400 px；/* ie5win fudge开头*/voice-family : ' \ \ ' } \ \ ' '；语音家庭：继承；宽度： 370 px；} htmlbody #内容{ width: 370px/* ie5 win foggy ends */}

单列3:固定在左上角，宽度不固定，宽度以百分比(%)定义，适应页面。

单列4(推荐):固定宽度，在正文样式中定义中心属性(text-align : center；)以适应页面的自动居中。单行两列

两个单独的列1:两个列都有固定的宽度。第一列浮动在左上角，第二列浮动在第一列的右侧。

一行中的两列2:两列都是百分比宽度，但不在屏幕上。第一列固定在左上角，第二列浮动在第一列的右边。

一行中的两列3:两列都是百分比宽度和全屏。两列都是绝对定位的。

一行中的两列4:两列都是百分比宽度和全屏。第一列浮动在左上角，第二列浮动在右上角。

一行中的两列5:两列都是百分比宽度和全屏。第一列浮动在左上角，第二列浮动在第一列的右侧。

单行三列

三列1:左右列绝对定位(右列位于右上方)。左右栏宽度固定，中间栏适应页面。

三列2:左列位于左上角，右列位于右上角，中间一列浮动在左列右侧。左右栏宽度固定，中间栏适应页面。

一行三列3:三列都是绝对定位的。左右栏宽度固定，中间栏根据内容适配。

三列4(推荐):与Style 2类似，只是在body style中增加了margin: 20px属性，解决了Netscape 6.0中中间一列顶部的问题

三栏5:左右栏绝对定位，中间栏自适应。全屏宽度。顶行和三列

顶行，三列，1(推荐):顶行自适应页面宽度。列绝对定位，中间列自适应页面。

顶行三列2:全屏宽度。