一行一列

一行一列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 */
 }

下载全部样式

一行一列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 */
 }

下载全部样式

一行一列3：

固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面。

#content {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 background: #FFF;
 border: 5px solid #666;
 width: 74%; /* ie5win fudge begins */
 padding: 10px 10% 10px 15%;
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 55%;
 padding: 10px 9% 10px 11%;
 }
html>body #content {
 width: 55%;
 padding: 10px 9% 10px 11%;
 } /* ie5win fudge ends */

下载全部样式

一行一列4(推荐)：

固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

body {
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 font-family: verdana, arial, helvetica, sans-serif;
 color: #c060;
 background-color: #CCC;
 text-align: center;
 /* part 1 of 2 centering hack */
 }
#content {
 width: 400px;
 padding: 10px;
 margin-top: 20px;
 margin-bottom: 20px;
 margin-right: auto;
 margin-left: auto;  
 /* opera does not like 'margin:20px auto' */
 background: #FFF;
 border: 5px solid #666;
 text-align:left;
 /* part 2 of 2 centering hack */
 width: 400px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 370px;
 }
html>body #content {
 width: 370px; /* ie5win fudge ends */
 }

下载全部样式