css頁面中左中右分欄佈局的實現

頁面左中右分欄佈局在目前的網頁佈局中是比較常見的，下面就與大家分享兩個不錯的方法可以實現左中右分欄佈局，代碼很詳細，需要的朋友可不要錯過

以下程式碼複製貼上即可使用：
範例一： 

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
<meta> 
<style> 
.page_center { 
width:100%; 
} 
#nav { 
background-color:red; 
height:20px; 
} 
#left { 
width:120px; 
background-color:green; 
position:absolute; 
} 
#middle { 
background-color:yellow; 
} 
#right { 
width:120px; 
background-color:green; 
position:absolute; 
top:0; 
right:0; 
} 
#foot { 
background-color:pink; 
} 
#main { 
position:relative; 
} 
</style> 
 
 
<p>上边</p> 
<p> 
</p><p>左边</p> 
<p> 中间部分</p> 
<p>右边</p> 
 
<p>底边</p> 
 

範例2：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
<meta> 
<title>Untitled Document</title> 
 
<style> 
#left{ 
float:left; width:240px; height:500px; background:#0C9; 
} 
#right{ 
float:right;width:240px;height:500px; background:#933; 
} 
#center{ 
height:500px;background:#06C; 
} 
</style> 
 
<p>左边</p> 
<p>右边</p> 
<p>中间</p> 
 

<span><strong></strong></span>

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於CSS如何實作多行多列佈局的方法

以上是css頁面中左中右分欄佈局的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！