双飞翼布局的大概意思就是左右两边的内容是固定的，大小是固定的，
而中间的布局的随着页面的大小变化而自动变化的。
通过代码来解析：
1.四个div，也可以使用section，其中main,left.right为同一级的元素，inner为main的子元素。
2.main，left，right均左浮动。
3.main的宽度为100%，即占满这个页面。
4.设置left的margin-left:-100%;既让left与main在同水平线上，处在最左边。
5.设置right的margin-left:-200px，其中200px为right的宽度，让right停在最右侧。
6.设置main的子元素inner，width与main一样，margin的顺序为上、右、下、左，所以margin:0px 200px 0px 200px,
表示离左边200px,离右边200px,其中前者为left的宽度，后者为right的宽度。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>双飞翼布局</title> <style> body { margin: 0px; padding: 0px; min-width: 500px; } #main { width: 100%; height: 200px; background-color: red; float: left; } #left { width: 200px; height: 200px; background-color: blue; float: left; margin-left: -100%; } #right { width: 200px; height: 200px; background-color: green; float: left; margin-left: -200px; } #inner { margin: 0px 200px 0px 200px; background-color: pink; height: 200px; word-break: break-all; } </style> </head> <body> <div id="main"> <div id="inner">
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf </div> </div> <div id="left"></div> <div id="right"></div> </body> </html>
原文：http://www.cnblogs.com/xiaoai123/p/6914709.html