DIV+CSS 网页布局之：三列布局

1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>三列布局</title>
 <style>
 *{margin:0;padding:0;}
 #herder{
     height:50px;
     background:blue;
 }
 #main{
     width:100%;
     overflow:hidden;
 }
 #main .main-left{
     width:25%;
     height:800px;
     background:red;
     float:left;
 }
 #main .main-center{
     width:50%;
     height:800px;
     background:lightgreen;
     float:left;
 }
 #main .main-right{
     width:25%;
     height:800px;
     background:pink;
     float:right;
 }
 #footer{
     height:50px;
     background:gray;
 }
 </style>
 </head>
 <body>
 <div id="herder">页头</div>
 <div id="main">
     <div class="main-left">左列</div>
     <div class="main-center">中间</div>
     <div class="main-right">右列</div>
 </div>
 <div id="footer">页脚</div>
 </body>
 </html>

2、左右两列固定宽度，中间内容宽度自适应

　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>两边固定中间自适应布局</title>
 <style>
 *{margin:0;padding:0;}
 #herder{
     height:50px;
     background:blue;
 }
 #main{
     width:100%;
     position:relative;
 }
 #main .main-left{
     width:200px;
     height:800px;
     background:red;
     position:absolute;
     left:0;
     top:0;
 }
 #main .main-center{
     height:800px;
     background:lightgreen;
     margin:0 310px 0 210px;
 }
 #main .main-right{
     width:300px;
     height:800px;
     background:pink;
     position:absolute;
     right:0;
     top:0;
 }
 #footer{
     height:50px;
     background:gray;
 }
 </style>
 </head>
 <body>
 <div id="herder">页头</div>
 <div id="main">
     <div class="main-left">左列</div>
     <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
     <div class="main-right">右列</div>
 </div>
 <div id="footer">页脚</div>
 </body>
 </html>