4.布局之双飞翼布局
问题描述：
三格布局，左右宽度固定为200px,中间宽度随屏幕变化而变化
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0px;} 8 .header{ background:#666; text-align:center;} 9 .body{ overflow:hidden;*zoom:1;} 10 .wrap-2{ margin-top:30px;} 11 .wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;} 12 .wrap-2 .main-wrap-2{ margin:0 200px 0 150px; } 13 .wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; margin-bottom:-3000px; padding-bottom:3000px;} 14 .wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; margin-bottom:-3000px; padding-bottom:3000px;} 15 .footer{ background:#666; text-align:center;} 16 </style> 17 </head> 18 <body> 19 20 21 <div class="wrap-2"> 22 <div class="header">Header</div> 23 <div class="body"> 24 <div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div> 25 <div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div> 26 <div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div> 27 </div> 28 <div class="footer">Footer</div> 29 </div> 30 </body> 31 </html>
要点：
1.在浮动元素上使用margin负值，可以使其向margin相反的方向偏移相应的数值（参照物是原margin方向的边框）。
