1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body{
8 margin: 0
;
9 padding: 0
;
10 color: #000
;
11 }
12
13 /*
14 1）左右两个div浮动，中间的div放在上面
15 2）通过margin-left调整到一行
16 3）中间div添加一个子节点，设置margin调整位置
17 */
18 .container{
19 min-
width: 440px;
20 height: 200px;
21 background-
color: greenyellow;
22 }
23
24 .left,.right{
25 width: 200px;
26 height: 200px;
27 background-
color: red;
28 float: left;
29 }
30
31 .main{
32 width: 100%
;
33 height: 200px;
34 background-
color: blue;
35 float: left;
36 }
37
38 .main-
content{
39 margin: 0
200px;
40 }
41
42 .left{
43 margin-left: -100%
;
44 }
45
46 .right{
47 margin-left: -
200px;
48 }
49
50 </style>
51 </head>
52 <body>
53 <!--容器-->
54 <div class="container">
55 <div class="main">
56 <div class="main-content">中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏</div>
57 </div>
58 <div class="left">左边栏</div>
59 <div class="right">右边栏</div>
60 </div>
61 </body>
62 </html>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11110025.html
相关资源：css多种方式实现双飞翼布局
