固定寬度佈局
單列布局
固定寬度的單列布局中，外層指定寬度（如果沒指定寬度，會自動伸展），設置 margin: 20px auto; 實現居中即可。
HTML結構：
<!DOCTYPE HTML>
<html>
<head>
<title>單列固定寬度</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div>
<div id="content">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div>
<div id="pagefooter">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div>
</body>
</html> body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
.warp{
border: 1px solid black;
width: 760px;
margin: 10px auto;
}
.warp h2{
background-color: #666;
padding: 20px 20px 10px;
margin: 0;
}
.warp .main{
background-color: #999;
padding: 10px 20px;
}
.warp .footer p{
background-color: #CCC;
color: #888;
text-align: right;
display: block;
padding: 10px 20px 20px;
margin: 0;
}1-2-1 佈局
實現固定寬度的 1-2-1 佈局有兩種方式，一種是使用 absolute 定位，一種是使用 float 佈局。
HTML結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 固定寬度</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 760px;
margin: 10px auto;
}
#header{
border: 1px solid black;
background-color: #666;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}1）使用 absolute 定位：用這種方法只需要確定其中一列的寬度，並設爲 absolute: absolute; 另一列使用margin 定位。 注意父元素設爲 position:relative; 而且設爲 absolute 的列必須比另一列高度小。
#container{
position: relative;
}
#content{
border: 1px solid black;
background-color: #999;
width: 500px;
position: absolute;
top: 0;
left: 0;
}
#side{
border: 1px solid black;
background-color: #999;
margin-left: 520px;
}2）使用float 定位：使用這種方法兩列都必須設置寬度，並且要在最後加一個空的元素 <div id="clear"></div>
#content{
border: 1px solid black;
background-color: #999;
width: 500px;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 250px;
float: right;
}
#clear{
clear: both;
}1-3-1 佈局
所用方法與 1-2-1 佈局一樣，這裏不再贅述
1-((1-2)+1)-1 佈局
HTML 結構：
<!DOCTYPE HTML>
<html>
<head>
<title>1-((1-2)+1)-1 固定寬度</title>
<meta charset="utf-8" />
</head>
<body>
<div id="header">
<p>Header</p>
</div>
<div id="container">
<div id="content">
<div id="contentHeader">
<p>Content Header</p>
</div>
<div id="columns">
<div id="column1">
<h2>Column1 Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="column2">
<h2>Column2 Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div>
<div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 760px;
margin: 10px auto;
}
#header{
border: 1px solid black;
background-color: #666;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
/*使用 float 佈局*/
#content{
width: 500px;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 240px;
float: right;
}
#clear{
clear: both;
}
#contentHeader{
border: 1px solid black;
background-color: #999;
}
#columns{
margin: 10px 0;
}
#column1{
border: 1px solid black;
background-color: #999;
width: 250px;
float: left;
}
#column2{
border: 1px solid black;
background-color: #999;
width:210px;
float: right;
}