Top

利用块级元素流特性实现三栏布局

说明：position的值不为relative和static激活BFC

左右侧边栏固定宽,中间宽度自适应

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三列布局</title>
 6     <style type="text/css">        
 7         *{margin: 0;padding: 0;}
 8         html, body{height: 100%;}
 9 
10         /*定位布局*/   
11         .container, .left, .right, .center { 
12             height: 100%;
13         }
14         .container{ 
15             position: relative;
16         }
17         .left, .right{
18             top: 0;
19             position: absolute;
20             width: 200px;
21         }
22         .left{
23             left: 0;
24             background-color: #f60;
25         }
26         .right{
27             right: 0;
28             background-color: #e30;
29         }
30         .center{
31             background-color: #fde560;
32             padding: 10px 10px 0 10px;
33             margin: 0 200px;
34         }
35     </style>
36 </head>
37 <body>
38     <div class="container">
39         <div class="left"></div>
40         <div class="center">左右栏固定宽、中间栏宽度自适应</div>
41         <div class="right"></div>
42     </div>
43 </body>
44 </html>

 

posted @ 2016-09-21 15:49  Avenstar  阅读(203)  评论(0)    收藏  举报