div+css早已是现在布局最常用的一种方式，可是布局又有许多种，因网站的功能、外表、适应人群而异，网站采用的布局也将是各式各样。常用的布局技术又有双飞翼布局、瀑布式布局、响应式布局等等，现实的前端开发中又常常不可能只用一门技术完成布局，往往需要多种技术相结合。而今天我将在这里为大家以最简单最直接的方式了解双飞翼布局。
如果把双飞翼布局的左中右三栏看作是一只大鸟，那么可以把main看作是鸟的身体，left与right则可以理解为鸟的左翼与右翼。而此布局最重要的是将身体先对好，然后左翼与右翼移至身体的两侧。而其中我们经常使用浮动 float、负边距 negative margin与相对定位 relative position来完成各种布局。
接下来我们来实现第一步：将身体摆好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
    <title> 双飞翼布局</title>
    <meta charset="utf-8">
    <style>
        .main{
            width:100%;
            height:200px;
            background-color:black;
        }
    </style>
</head>
 <body>
  <div class="main"><div>
 </body>
</html>

实现结果如下：（其中最要注意的是width:100%，即适应浏览器的变化而变化。不然也失去双飞翼的意义了。）

接下来来摆正双翼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
    <title> 双飞翼布局</title>
    <meta charset="utf-8" />
    <style>
        .main{
            width:100%;
            height:200px;
            background-color:black;
            float:left;
        }

        .left{
            width:200px;
            height:200px;
            background-color:#faa;
            float:left;
            margin-left:-100%;
        }

        .right{
            width:200px;
            height:200px;
            background-color:#aaf;
            float:left;
            margin-left:-200px;
        }
    </style>
</head>
 <body>
  <div class="main"></div>
  <div class="left">左</div>
  <div class="right">右</div>
 </body>
</html>

结果如下：

上面可以看到，左右两翼中最重要的是将把margin-left设置成负边距(其实还有另一种方法可以不设置负边距)然后所有的都设置成浮动。
最后，我们只需要要背上一点，双飞翼便“飞”了起来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
<head>
    <title> 双飞翼布局</title>
    <meta charset="utf-8" />
    <style>
        .main{
            width:100%;
            height:200px;
            background-color:black;
            float:left;
        }

        .left{
            width:200px;
            height:200px;
            background-color:#faa;
            float:left;
            margin-left:-100%;
        }

        .right{
            width:200px;
            height:200px;
            background-color:#aaf;
            float:left;
            margin-left:-200px;
        }

        .main-content{
            height:200px;
            margin:0 200px 0 200px;
            background-color:#afa;
        }
    </style>
</head>
 <body>
  <div class="main">
    <div class="main-content">我是正文中的内容</div>
  </div>
  <div class="left">左</div>
  <div class="right">右</div>
 </body>
</html>

结果如下：

上面看到最重要的是将main-content放在main里，我们也就可以在main中随意的写我们的内容了，而main-content是没有设置宽度的，有设置边距，这样我们就可以自适应浏览器的大小了。

以上就是双飞翼布局的最简单、最直接的书写方式了。而布局是没有任何限制的，没有一个布局可能通用网站，而掌握了最简单，最基础的布局方法，理解透彻了，其所有布局都能轻易掌握了，正所谓一通百通便是如此。