一行三列

一行三列 (1)：左右列都绝对定位(右列定位在右上)。左列和右列固定宽度，中间列自适应页面。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 margin: 20px 190px 20px 190px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 }
#right {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body right {
 width: 120px; /* ie5win fudge ends */
 }

下载全部样式

一行三列 (2)：左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 margin: 20px 190px 20px 190px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 }
body>#middle {
 float: left; /* required by N6.01Win,
 and must be hidden from IE5Win. */
 }
#right {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #right {
 width: 120px; /* ie5win fudge ends */
 }

下载全部样式

一行三列 (3)：三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 position: absolute;
 margin: 20px 190px 20px 190px;
 top: 0px;
 left: 0px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 }
#right {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #right {
 width: 120px; /* ie5win fudge ends */
 }

下载全部样式

一行三列 4(推荐)：类似样式2，只是将margin: 20px属性增加在body样式中，解决了中间列在Netscape6.0中置顶的问题。

body {
 margin: 20px 0px 0px 0px;
  /* n6.01win-mac won't recognize top margin
  for middle box, so it goes here */
 padding: 0px 0px 0px 0px;
 font-family: verdana, arial, helvetica, sans-serif;
 color: #060;
 background-color: #CCC;
 }
#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 margin: 0px 190px 20px 190px; /* n6.01win n6mac
 won't recognize top margin for middle box, so it
 goes in body */
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 }
#right {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a space at right
 swhen there is no scroll bar */
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #right {
 width: 120px; /* ie5win fudge ends */
 }

下载全部样式

一行三列 (5)：左右列绝对定位，中间列自适应。宽度满屏。

#left {
 position: absolute;
 top: 0px;
 left: 0px;
 margin: 0px;
 padding: 10px;
 border: 0px;
 background: #FFF;
 width: 190px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 170px;
 }
html>body #left {
 width: 170px; /* ie5win fudge ends */
 }
#middle {
 padding: 10px;
 border: 0px;
 background: #FFF;
 /* ie5win fudge begins */
 margin: -20px 190px 0px 190px;
 voice-family: "\"}\"";
 voice-family:inherit;
 margin-top: 0px;
 }
html>body #middle {
 margin-top: 0px; /* ie5win fudge ends */
 }
#right {
 position: absolute;
 top: 0px;
 right: 0px; /* Opera5.02 will show a space at right
 when there is no scroll bar */
 margin: 0px;
 padding: 10px;
 border: 0px;
 background: #FFF;
 width: 190px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 170px;
 }
html>body #right {
 width: 170px; /* ie5win fudge ends */
 }

下载全部样式

顶行三列

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

#top {
 margin: 20px 20px 0px 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 height: 100px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 height: 70px;
 }
html>body #top {
 height: 70px; /* ie5win fudge ends */
 }
#left {
 position: absolute;
 top: 120px;
 left: 0px;
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #left {
 width: 120px; /* ie5win fudge ends */
 }
#middle {
 margin: 20px 190px 20px 190px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 }
#right {
 position: absolute;
 top: 120px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 20px;
 padding: 10px;
 border: 5px solid #666;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 120px;
 }
html>body #right {
 width: 120px; /* ie5win fudge ends */
 }

下载全部样式

顶行三列 {2)：宽度满屏

#top {
 margin: 0px 0px 0px 0px;
 padding: 10px;
 border: 0px;
 background: #999;
 height: 100px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 height: 80px;
 }
html>body #top {
 height: 80px; /* ie5win fudge ends */
 }
#left {
 position: absolute;
 top: 100px;
 left: 0px;
 margin: 0px;
 padding: 10px;
 border: 0px;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 130px;
 }
html>body #left {
 width: 130px; /* ie5win fudge ends */
 }
#middle {
 padding: 10px;
 border: 0px;
 background: #FFF;
 margin: 0px 150px 0px 150px;
 }
#right {
 position: absolute;
 top: 100px;
 right: 0px; /* Opera5.02 will show a space
 at right when there is no scroll bar */
 margin: 0px;
 padding: 10px;
 border: 0px;
 background: #FFF;
 width: 150px; /* ie5win fudge begins */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 130px;
 }
html>body #right {
 width: 130px; /* ie5win fudge ends */
 }

下载全部样式