三列自适应布局（左右定宽 中间自适应）

左右定中间自适应三列布局

1.绝对定位 2.浮动 3.flex

 1 1.绝对定位
 2 <!doctype html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>三栏布局</title>
 6     <style type="text/css">
 7     * {
 8         margin: 0;
 9         padding: 0;
10     }
11     
12     #main {
13         margin: 0 300px;
14         height: 200px;
15         background: #00b7ef;
16     }
17     
18     #left,
19     #right {
20         width: 300px;
21         height: 200px;
22     }
23     
24     #left {
25         position: absolute;
26         top: 0;
27         left: 0;
28         background: #8fc41f;
29     }
30     
31     #right {
32         position: absolute;
33         top: 0;
34         right: 0;
35         background: #fffaba;
36     }
37     </style>
38 </head>
39 
40 <body>
41     <!-- 位置是left main right 位置可互换-->
42     <div id="left">
43     </div>
44     <div id="right">
45     </div>
46     <div id="main">
47     </div>
48 </body>
49 
50 </html>
 1 2.浮动
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6     <meta charset="utf-8" />
 7     <title> 三列左右固定宽度中间自适应</title>
 8     <style>
 9     body {
10         margin: 0;
11         padding: 0;
12     }
13     
14     #left {
15         background-color: #E8F5FE;
16         height: 400px;
17         width: 100px;
18         float: left;
19     }
20     
21     #center {
22         background-color: #F2FDDB;
23         height: 400px;
24         margin-right: 100px;
25         margin-left: 100px;
26     }
27     
28     #right {
29         background-color: #FFE7F4;
30         height: 400px;
31         width: 100px;
32         float: right;
33     }
34     </style>
35 </head>
36 
37 <body>
38     <!-- 必须是左右中三列顺序 如果是float-->
39     <div id="left">左列</div>
40     <div id="right">右列</div>
41     <div id="center">中列</div>
42 </body>
43 
44 </html>




 1 3. flex
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>Document</title>
 8     <style type="text/css">
 9     * {
10         margin: 0;
11         padding: 0;
12     }
13     
14     .three-coloum {
15         display: flex;
16         display: -webkit-flex;
17         width: 100%;
18         height: 500px;
19     }
20     
21     .left {
22         background-color: red;
23         width: 200px;
24         /*height: 100px;*/
25     }
26     
27     .right {
28         background: blue;
29         width: 200px;
30         /*height: 100px;*/
31     }
32     
33     .main {
34         background: yellow;
35         flex: 1;
36         -webkit-box-flex: 1;
37         -moz-box-flex: 1;
38     }
39     </style>
40 </head>
41 
42 <body>
43     <div class="three-coloum">
44         <div class="left">左</div>
45         <div class="main">中间</div>
46         <div class="right">右</div>
47     </div>
48 </body>
49 
50 </html>




 


 




 






		

		
posted @ 
2016-10-05 16:49 
游离的心 
阅读(289) 
评论(0) 
编辑 
收藏 
举报