双飞翼布局经典之处就在于，left,middle,right的高度可以自适应。类似的实现方式，现在可以用flex弹性布局实现。
下面是双飞翼布局的一个大致框架：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>双飞翼布局</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .article { 13 overflow: hidden; 14 } 15 16 .article .middle { 17 background-color: red; 18 float: left; 19 100%; 20 margin-bottom: -9999px; 21 padding-bottom: 9999px; 22 } 23 24 .article .left { 25 float: left; 26 margin-left: -100%; 27 200px; 28 margin-bottom: -9999px; 29 padding-bottom: 9999px; 30 background-color: green; 31 } 32 33 .article .right { 34 float: left; 35 150px; 36 margin-left: -150px; 37 background-color: orange; 38 margin-bottom: -9999px; 39 padding-bottom: 9999px; 40 } 41 42 .article .middle .inner { 43 margin: 0 150px 0 200px; 44 height: 550px; /*内容有多大就撑多大*/ 45 padding: 10px; 46 } 47 48 .footer, .header{ 49 100%; 50 height: 50px; 51 line-height: 50px; 52 background-color: #000; 53 color: #fff; 54 text-align: center; 55 } 56 </style> 57 </head> 58 <body> 59 <header> 60 <div class="header"> 61 header 62 </div> 63 </header> 64 <div class="content-box"> 65 <div class="article"> 66 <div class="middle"> 67 <div class="inner"> 68 AAAAA 69 </div> 70 </div> 71 <div class="left"> 72 leftleftleft 73 </div> 74 <div class="right"> 75 rightrightright 76 </div> 77 </div> 78 </div> 79 <footer> 80 <div class="footer"> 81 footer 82 </div> 83 </footer> 84 </body> 85 </html>