双飞翼 

 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>

 

posted @ 2018-12-14 02:07  耗子&#128045;  阅读(256)  评论(0)    收藏  举报