- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title>CSS双飞翼布局</title>
- 6 <style>
- 7 /* 这里的高度可以根据自己的实际情况来设置 */
- 8 .main,.left,.right { float:left; height:400px; margin: 0 -30% 0 -20%}
- 9 /* 主体的宽度要自适应,然后设置左右两边的"翼"即可 */
- 10 .main { width:100%; background:lightblue;}
- 11 .left { width:20%; background:lightcoral;margin-left:-100%;}
- 12 .right { width:30%; background:lightgreen;margin-left:-30%; }
- 13 </style>
- 14 </head>
- 15 <body>
- 16 <div class="wrap">
- 17 <div class="main">主体</div>
- 18 <div class="left">左边</div>
- 19 <div class="right">右边</div>
- 20 </div>
- 21 </body>
- 22 </html>
来源: