1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 .fix{ 12 float: left; 13 } 14 .left{ 15 background-color: red; 16 width: 150px; 17 margin-left: -100%; 18 } 19 .main{ 20 background-color: cornflowerblue; 21 width: 100%; 22 } 23 .right{ 24 background-color: chartreuse; 25 width: 200px; 26 margin-left: -200px; 27 } 28 .inner{ 29 margin-left: 150px; 30 margin-right: 200px; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="box"> 36 <div class="main fix"><div class="inner">中间</div></div> 37 <div class="left fix">左边</div> 38 <div class="right fix">右边</div> 39 </div> 40 </body> 41 </html>
个人理解：
双飞翼布局目的是实现当浏览器界面缩小的时候左右定宽，中间缩小。所以有左右两块设置定宽。
解释下负边距问题，我的理解是，先说没有负边距时候的效果，上面代码中左边会挤没，右边被挤下来。而双飞翼布局目的是要把左右两块和中间的一块并排排列，而这里的实现方式是把左右两块和中间的内部块并排排列。为了实现这种效果，就设置了负边距，负边距的意思是把他俩“抓”到里面去。-100% 和 -200px的区别，说白了就是把-100%的元素放到最前面，100%指的是整个界面的宽度，-200px只是单纯的将元素强制向左“拉”200px的距离，也就把其拉到了上面。
最终的结果就是，把“左块”、“右块”、“中间内部块”都拉入到了中间内部。从而实现双飞翼。