[h3]单行单列[/h3] [h3][url=http://www.w3cn.org/article/layout/2004/csslayout/onebox.html] [/url][center][url=http://www.w3cn.org/article/layout/2004/csslayout/onebox.html][img]http://files.jb51.net/upload/200711021854313.gif[/img] [/url][/center][/h3] 单行单列1：采用float浮在左上角，固定宽度。 #content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }[url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_absolute.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_absolute.html][img]http://files.jb51.net/upload/200711021854313.gif[/img] [/url][/center]单行单列2：固定在左上角，固定宽度，采用的是绝对(absolute)定位。 #content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ voice-family: "\\"}\\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }[url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_fluid.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_fluid.html][img]http://files.jb51.net/upload/200711021854313.gif[/img] [/url][/center]单行单列3：固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。 [url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_centent.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/onebox_centent.html][img]http://files.jb51.net/upload/200711021855724.gif[/img] [/url][/center]单行单列4(推荐)：固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。 [h3]单行两列[url=http://www.w3cn.org/article/layout/2004/csslayout/twobox.html] [/url][center][url=http://www.w3cn.org/article/layout/2004/csslayout/twobox.html][img]http://files.jb51.net/upload/200711021855638.gif[/img] [/url][/center][/h3]单行两列1：两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。 [url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_fluid.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_fluid.html][img]http://files.jb51.net/upload/200711021855638.gif[/img] [/url][/center]单行两列2：两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边。 [url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch.html][img]http://files.jb51.net/upload/200711021855289.gif[/img] [/url][/center]单行两列3：两列都百分比宽度，满屏。两列都采用绝对定位。[url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch2.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch2.html][img]http://files.jb51.net/upload/200711021855289.gif[/img] [/url][/center]单行两列4：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。 [url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch3.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/twobox_touch3.html][img]http://files.jb51.net/upload/200711021855289.gif[/img] [/url][/center]单行两列5：两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。 [h3]单行三列[/h3][h3][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox.html] [/url][center][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox.html][img]http://files.jb51.net/upload/200711021856298.gif[/img] [/url][/center][/h3]单行三列1：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。 [url=http://www.w3cn.org/article/layout/2004/csslayout/threebox2.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox2.html][img]http://files.jb51.net/upload/200711021856298.gif[/img] [/url][/center]单行三列2：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。 [url=http://www.w3cn.org/article/layout/2004/csslayout/threebox3.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox3.html][img]http://files.jb51.net/upload/200711021856298.gif[/img] [/url][/center]单行三列3：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。 [url=http://www.w3cn.org/article/layout/2004/csslayout/threebox4.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox4.html][img]http://files.jb51.net/upload/200711021856298.gif[/img] [/url][/center]单行三列4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。 [url=http://www.w3cn.org/article/layout/2004/csslayout/threebox_touch.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/threebox_touch.html][img]http://files.jb51.net/upload/200711021856502.gif[/img] [/url][/center]单行三列5：左右列绝对定位，中间列自适应。宽度满屏。 [h3]顶行三列[url=http://www.w3cn.org/article/layout/2004/csslayout/fourbox.html] [/url][center][url=http://www.w3cn.org/article/layout/2004/csslayout/fourbox.html][img]http://files.jb51.net/upload/200711021857357.gif[/img] [/url][/center][/h3]顶行三列1(推荐)：顶行自适应页面宽度。左右列绝对定位，中间列自适应页面。 [url=http://www.w3cn.org/article/layout/2004/csslayout/fourbox_touch.html] [/url] [center][url=http://www.w3cn.org/article/layout/2004/csslayout/fourbox_touch.html][img]http://files.jb51.net/upload/200711021857226.gif[/img] [/url][/center][list] [*]顶行三列2：宽度满屏 [/*][/list]