码迷,mamicode.com
首页 > 其他好文 > 详细

双飞翼布局

时间:2016-09-19 22:15:59      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:

初学:

《双飞翼布局》

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>

技术分享

双飞翼布局

标签:

原文地址:http://www.cnblogs.com/luchengming/p/5886848.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!