16种css页面布局

单行单列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 采用float浮在左上角，固定宽度。 #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 采用float浮在左上角，固定宽度。 #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 */ } 单行两列1 #content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 300px; /* ie5win fudge begins */ voice-family: ""}""; voice-family:inherit; width: 270px; } html>body #content { width: 270px; /* ie5win fudge ends */ } #content2 { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 300px; /* ie5win fudge begins */ voice-family: ""}""; voice-family:inherit; width: 270px; } html>body #content2 { width: 270px; /* ie5win fudge ends */ } 单行两列2 两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。 #content { float: left; padding: 10px 2% 10px 2%; margin: 20px 1% 20px 2%; background: #FFF; border: 5px solid #666; width: 44%; /* ie5win fudge begins */ voice-family: ""}""; voice-family:inherit; width: 41%; } html>body #content { width: 41%; /* ie5win fudge ends */ } #content2 { float: right; padding: 10px 2% 10px 2%; margin: 20px 2% 20px 1%; background: #FFF; border: 5px solid #666; width: 44%; /* ie5win fudge begins */ voice-family: ""}""; voice-family:inherit; width: 41%; } html>body #content2 { width: 41%; /* ie5win fudge ends */ } http://www.xieguang133.com/