双飞翼布局和圣杯布局有很多相识之处，区别在于双飞翼布局不使用display定位，结构层面上只将center用div包裹，以margin留出左右侧边栏的距离。
<body> <div id="header">header</div> <div id="container"> <div id="main" class="column"> <div id="center">center</div> </div> <div id="left" class="column">left</div> <div id="right" class="column">right</div> </div> <div id="footer">footer</div> </body>CSS代码如下：
html,body,div{ margin:0; padding:0; } body{ height:700px; } #header,#footer{ width:100%; height:15%; background-color:green; } #main { width: 100%; } .column { float: left; height:70%; } #center { margin-left: 200px; margin-right: 200px; background-color:#eee; } #left { width: 200px; margin-left: -100%; background-color:red; } #right { width: 200px; margin-left: -200px; background-color:blue; } #footer { clear: both; }可以看到，双飞翼布局中结构的设置不需使用display定位，因此也更为简单。
