左右定中间自适应三列布局
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> 转载于:https://www.cnblogs.com/angle-happy/p/5932479.html