单行单列
采用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 */
}
固定在左上角，固定宽度，采用的是绝对(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 */
}
固定在左上角，不固定宽度，采用百分比(%)定义宽度来自适应页面
#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 */
固定宽度，采用在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 */
}
单行两列
两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边(提醒：left的代码是定义左边CSS的，right是定义右边CSS的，下文的top和其它也一样，请结合相应位置阅读)
#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 */
}
两列都百分比宽度，但不满屏。第一列固定在左上角，第二列浮在第一列右边
#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 */
}
三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应
#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 */
}
类似样式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 */
}
左右列绝对定位，中间列自适应。宽度满屏
#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 */
}
顶行三列
顶行自适应页面宽度。左右列绝对定位，中间列自适应页面
#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 */
}
宽度满屏
#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 */
}