首页 > 代码库 > 双飞翼布局

双飞翼布局

初学:

《双飞翼布局》

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>

技术分享

双飞翼布局