1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>双飞翼布局</title>
6 <style>
7 .wrap {
8 width:1000px;
9 height:600px;
10 margin:0 auto;
11 }
12 .main{
13 width:100%;
14 height:600px;
15 margin:0 auto;
16 }
17 .content{
18 height:600px;
19 background: pink;
20 margin: 0 220px;
21 }
22 .left{
23 width: 200px;
24 height: 600px;
25 background: red;
26 float: left;
27 margin-left: -100%;
28
29 }
30 .right{
31 width: 200px;
32 height: 600px;
33 background: red;
34 float: left;
35 margin-left:-200px;
36 }
37
38 </style>
39 </head>
40 <body>
41 <div class="wrap">
42 <div class="main">
43 <div class="content"></div>
44 </div>
45 <div class="left"></div>
46 <div class="right"></div>
47 </div>
48
49
50 </body>
51 </html>
