【CSS如何实现双飞翼布局】

双飞翼布局是一种基于浮动布局的设计模式，主要用于实现三栏布局。它的主要特点是左右两列是浮动的，中间一列使用margin负值来达到“自适应”的效果。这种布局模式可以避免使用嵌套的div，同时也可以保证页面的语义结构清晰。以下是实现双飞翼布局的步骤：

1. HTML结构

<div class="wrapper">
    <div class="container">
        <div class="left">div>
        <div class="right">div>
    div>
    <div class="content">div>
div>
1
2
3
4
5
6
7

2. CSS样式

.wrapper {
    width: 100%;
    overflow: hidden;
}

.container {
    float: left;
    width: 100%;
    background-color: #eee;
}

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

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

.content {
    margin: 0 210px 0 210px;
    background-color: #fff;
}
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

解释：

.wrapper设置为100%宽度，使其能够适应屏幕的宽度。

.container设置为float:left，使其能够在文档流中脱离，并设置为100%宽度，确保其包含整个页面布局。

.left、.right设置为float:left，使其能够在文档流中脱离，并设置为固定宽度，分别为200px。

中间的.content设置一个margin-left和margin-right，确保其在左右两侧预留200px的空间，以容纳左右两列的内容。

3. 结果

通过上面的代码，我们得到的效果是一个完整的双飞翼布局。左右两列的宽度固定，中间的列根据页面的宽度自适应，并且不需要使用嵌套的div来实现。