圣杯布局和双飞翼布局作用
圣杯布局和双飞翼布局的作用是一样的，就是两边顶宽然后中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局
三栏利用 float 和 负margin 并排，设置父容器的padding给两边的侧边栏预留位置。
1 | <div class="wrapper">
|
2 | <div class="middle">middle</div>
|
3 | <div class="left">left</div>
|
4 | <div class="right">right</div>
|
5 | </div>
|
1 | .wrapper {
|
2 | padding: 0 100px;
|
3 | }
|
4 | .middle {
|
5 | float: left;
|
6 | width: 100%;
|
7 | height: 300px;
|
8 | background: red;
|
9 | }
|
10 | .left {
|
11 | float: left;
|
12 | width: 100px;
|
13 | margin-left: -100%;
|
14 | background: blue;
|
15 | height: 300px;
|
16 | position: relative;
|
17 | right: 100px;
|
18 | }
|
19 | .right {
|
20 | float: left;
|
21 | width: 100px;
|
22 | margin-left: -100px;
|
23 | background: yellow;
|
24 | height: 300px;
|
25 | position: relative;
|
26 | left: 100px;
|
27 | }
|
双飞翼布局
三栏利用 float 和 负margin 并排，实在中间栏加了一层同情，利用margin给两边预留位置
1 | <div class="wrapper">
|
2 | <div class="container">
|
3 | <div class="middle">middle</div>
|
4 | </div>
|
5 | <div class="left">left</div>
|
6 | <div class="right">right</div>
|
7 | </div>
|
1 | .wrapper {
|
2 | width: 100%;
|
3 | }
|
4 | .container {
|
5 | float: left;
|
6 | width: 100%;
|
7 | }
|
8 | .middle {
|
9 | margin: 0 100px 0 100px;
|
10 | height: 300px;
|
11 | background: red;
|
12 | }
|
13 | .left {
|
14 | float: left;
|
15 | width: 100px;
|
16 | margin-left: -100%;
|
17 | background: blue;
|
18 | height: 300px;
|
19 | }
|
20 | .right {
|
21 | float: left;
|
22 | width: 100px;
|
23 | margin-left: -100px;
|
24 | background: yellow;
|
25 | height: 300px;
|
26 | }
|