初学：
《双飞翼布局》
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