DIV+CSS 网页布局之：三列布局_html/css_WEB-ITnose

1、宽度自适应三列布局

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

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

 1  2  3  4      5      6  7 *{margin:0;padding:0;} 8 #herder{ 9     height:50px;10     background:blue;11 }12 #main{13     width:100%;14     overflow:hidden;15 }16 #main .main-left{17     width:25%;18     height:800px;19     background:red;20     float:left;21 }22 #main .main-center{23     width:50%;24     height:800px;25     background:lightgreen;26     float:left;27 }28 #main .main-right{29     width:25%;30     height:800px;31     background:pink;32     float:right;33 }34 #footer{35     height:50px;36     background:gray;37 }38 39 40 41 
页头
42 
43     
左列
44     
中间
45     
右列
46 
47 
页脚
48 49 

登录后复制

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

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

 1  2  3  4      5      6  7 *{margin:0;padding:0;} 8 #herder{ 9     height:50px;10     background:blue;11 }12 #main{13     width:100%;14     position:relative;15 }16 #main .main-left{17     width:200px;18     height:800px;19     background:red;20     position:absolute;21     left:0;22     top:0;23 }24 #main .main-center{25     height:800px;26     background:lightgreen;27     margin:0 310px 0 210px;28 }29 #main .main-right{30     width:300px;31     height:800px;32     background:pink;33     position:absolute;34     right:0;35     top:0;36 }37 #footer{38     height:50px;39     background:gray;40 }41 42 43 44 
页头
45 
46     
左列
47     
设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。
48     
右列
49 
50 
页脚
51 52 

登录后复制