CSS基本布局16例
作者：Owen Briggs 2005-6-29
单行单列
采用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 */
}
说明:里面的/* ie5win fudge begins */的意思是下面那些的代码是为了纠正IE5中CSS宽度问题而写。
固定在左上角，固定宽度，采用的是绝对(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 */
}
单行两列
两列都固定宽度。第一列浮在左上角，第二列浮在第一列右边。
#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 */
}
两列都百分比宽度，满屏。两列都采用绝对定位。
#content {
position: absolute;
top: 0px;
left: 0px;
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content {
width: 46%; /* ie5win fudge ends */
}
#content2 {
position: absolute;
top: 0px;
right: 0px; /* Opera5.02 will show a
space at right when there is no scroll bar */
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content2 {
width: 46%; /* ie5win fudge ends */
}
/* Opera5.02 shows a 2px gap between.
N6.01Win sometimes does. Depends on amount
of fill and window size and wind direction. */
两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在右上角。
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content {
width: 46%; /* ie5win fudge ends */
}
#content2 {
float: right; /* Opera5.02 will show a
space at right when there is no scroll bar */
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content2 {
width: 46%; /* ie5win fudge ends */
} /* Opera5.02 shows a 2px gap between.
N6.01Win sometimes does. Depends on amount of
fill and window size and wind direction. */
两列都百分比宽度，满屏。第一列浮在左上角，第二列浮在第一列右边。
#content {
float: left;
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content {
width: 46%; /* ie5win fudge ends */
}
#content2 {
float: left;
/* Opera5.02 will show a space at
right when there is no scroll bar */
padding: 10px 2% 10px 2%;
margin: 0px;
border: 0px;
background: #FFF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 46%;
}
html>body #content2 {
width: 46%; /* 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 {
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 */
}
左列定位在左上，右列定位在右上，中间列浮在左列右面。左列和右列固定宽度，中间列自适应页面。
#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 */
}
三列都绝对定位。左列和右列固定宽度，中间列根据内容自适应。
#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 */
}