双飞翼布局

初学：

《双飞翼布局》

1 <!DOCTYPE HTML >
 2 <html>
 3 <head>
 4     <title>双飞翼布局</title>
 5     <style>
 6         .middle,.right,.left{
 7             min-height:150px;
 8             float:left;
 9         }
10         .middle{
11             width:100%;
12             background:#ff0000;
13         }
14         .left{
15             width:100px;
16             background:#00ff21;
17             margin-left:-100%;
18         }
19         .right{
20             width:300px;
21             background:#0026ff;
22             margin-left:-300px;
23         }
24         .middle div{
25             margin:0 300px 0 100px; 
26         }
27     </style>
28 </head>
29 <body>
30     <div class="middle">
31         <div>中</div>
32     </div>
33     <div class="left">左</div>
34     <div class="right">右</div>
35 </body>
36 </html>

posted @ 2016-09-19 21:52  lik-_-  阅读(125)  评论(0)  编辑  收藏  举报