今天小编跟大家讲解下有关css页面中常见左中右分栏布局的两种实现方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css页面中常见左中右分栏布局的两种实现方式 的相关资料，希望小伙伴们看了有所帮助。
以下代码复制粘贴即可使用： 示例一： 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"/> <style type="text/css"> .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> </head> <body> <div id="nav"class="page_center">上边</div> <div id="main"class="page_center"> <div id="left">左边</div> <div id="middle"> 中间部分</div> <div id="right">右边</div> </div> <div id="foot"class="page_center">底边</div> </body> </html> 示例2： 复制代码代码如下: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>Untitled document</title> </head> <style type="text/css"> #left{ float:left; width:240px; height:500px; background:#0C9; } #right{ float:right;width:240px;height:500px; background:#933; } #center{ height:500px;background:#06C; } </style> <body> <div id="left">左边</div> <div id="right">右边</div> <div id="center"style="">中间</div> </body> </html> 复制代码代码如下: <span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><strong></strong></span>来源：爱蒂网
