CSS基本佈局16例

單行單列

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

單行兩列

• 單行兩列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 */
}

• 單行兩列3：兩列都百分比寬度，滿屏。兩列都採用絕對定位。

#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. */

• 單行兩列4：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在右上角。

#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. */

 

• 單行兩列5：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在第一列右邊。

#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 */
}

單行三列

• 單行三列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 */
}