双飞翼布局的大概意思就是左右两边的内容是固定的，大小是固定的，
而中间的布局的随着页面的大小变化而自动变化的。
通过代码来解析：
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>
时间： 2025-01-02 16:54:30