1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>三栏布局－－双飞翼布局</title>
5 <style>
6 *{
7 margin: 0;
8 padding: 0;
9 }
10 .con{
11 width: 600px;
12 height: 200px;
13 margin: 0 auto;
14 box-sizing: border-box;
15 border: 1px solid red;
16 }
17 .mie ,.left ,.right{
18 float: left;
19 }
20 .middle{
21 width: 100%;
22
23 }
24 .mie_inner{
25 height: 150px;
26 background-color: gold;
27 margin-left: 100px;
28 margin-right: 100px;
29 }
30 .left{
31 width: 100px;
32 height: 170px;
33 margin-left: -100%;
34 background-color: purple;
35 }
36 .right{
37 width: 100px;
38 height: 170px;
39 margin-left: -100px;
40 background-color: pink;
41 }
42
43 </style>
44 </head>
45 <body>
46
47 <div class="con">
48 <div class="mie">
49 <div class="ner">中间布局</div>
50 </div>
51 <div class="left">左侧布局</div>
52 <div class="right">右侧布局</div>
53 </div>
54
55 </body>
56 </html>
