双飞翼布局

发表于 | 分类于

前言

双飞翼布局和圣杯布局，都是三栏布局，两侧栏宽度固定，中间栏自适应并且能在浏览器中优先展示渲染。它们实现的效果是一样的，差别在于其实现的思想。

既然了解了这两种布局的功能，接下来我们就来看看具体怎么实现吧。文章中的两种方式都是兼容目前所有的主流浏览器，包括IE6在内；所以是不使用‘box-sizing’属性的。第一个先看看双飞翼布局。

双飞翼布局

首先，先给出页面结构，在三栏外面套一个容器，如下代码：

1
2
3
4
5
6
7
<body>
    <div class="container">
        <div class="center col"></div>
        <div class="left col"></div>
        <div class="right col"></div>
    </div>
</body>

上面就是我们第一步的页面结构，把center写在第一个是为了实现在浏览器优先渲染。

接下来我们先给三栏各自设置宽高，这里我们高度都用400px。因为中间栏宽度要自适应，所以我们设置为100%。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.col{
    height:400px;
}
.center{
    width:100%;
    background:red;
}
.left{
    width:200px;
    background:green;
}
.right{
    width:200px;
    background:blue;
}

到这里，我们三栏的基本样式就出来了。此时，三栏并不在一行，那块级元素怎么才能一行显示呢？那就是通过浮动。所以，我们再加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.col{
    height:400px;
    float:left;//新增
}
.center{
    width:100%;
    background:red;
}
.left{
    width:200px;
    background:green;
}
.right{
    width:200px;
    background:blue;
}

浮动的特点就是这一行占满了就会换行。因为中间栏已经占满了一行，所以此时两侧栏是在第二行的。那怎么才能让两个侧栏上来呢？这就是负外边距的作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.col{
    height:400px;
    float:left;
}
.center{
    width:100%;
    background:red;
}
.left{
    width:200px;
    background:green;
    //此处的100%是相对于父元素的，在此处也就是center的宽度
    margin-left:-100%;//新增
}
.right{
    width:200px;
    background:blue;
    //此处的200px是自身的宽度
    margin-left：-200px;//新增
}

到这里，三栏的基本布局就已经完成了。但是还有个问题，就是当我们在center中加入内容后，两边的内容会被两侧栏挡住，前面我们说了为了兼容性，我们是不使用box-sizing属性的，所以不能直接给center加padding属性。这里不理解的可以参考我另一篇文章：关于盒模型的理解

这时我们可以在center中新增一个子元素用来放置中间的内容，同时让它的左右外边距为左右两栏的宽度：

1
2
3
4
5
6
7
8
9
<body>
    <div class="container">
        <div class="center col">
            <div class="main"></div>//新增
        </div>
        <div class="left col"></div>
        <div class="right col"></div>
    </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.col {
    height: 400px;
    float: left;
}
.center {
    width: 100%;
    background: red;
}
.left {
    width: 200px;
    background: green; 
    margin-left: -100%; 
}
.right {
    width: 200px;
    background: blue; 
    margin-left:-200px;
}
.main{
    margin:0 200px;//新增
}

至此，我们就实现了双飞翼布局。须注意一点：因为两侧栏宽度是一定的，中间自适应，这样如果宽度缩小到一定程度中间的内容就会乱，所以一般我们都会给body加上min-width属性。

圣杯布局，下篇文章再见吧。

--本文结束感谢您的阅读--