圣杯布局与双飞翼布局

发表于 | 分类于

圣杯布局与双飞翼布局的目的

  • 三栏布局，中间一栏最先加载和渲染（内容最重要）
  • 两侧内容固定，中间内容随着宽度自适应
  • 一般用于PC网页

圣杯布局

提要：容器padding留白，内容float布局，宽度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
37
38
39
40
41
42
43
44
45
46
47
48
49
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .clearfix:after{
        content:'';
        display: table;
        clear:both;
    }
    .header,.footer{
        height: 30px;
        width: 100%;
        background-color: darkslategrey;
    }
    .container{
        padding:0 220px 0 200px;        
    }
    .left,.middle,.right{
        position:relative;
        float:left;
        min-height:300px;
    }
    .middle{
        width: 100%;
        background-color: aquamarine;
    }
    .left{
        width:200px;
        margin-left: -100%;
        left:-200px;
        background-color:cornflowerblue;
    }
    .right{
        width:220px;
        margin-left:-220px;
        right:-220px;
        background-color:darkkhaki;
    }
</style>
<body>
    <div class="header"></div>
    <div class="container clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>    
</body>

双飞翼布局

提要：内容栏margin留白，去掉相对布局，只留浮动和负边距，注意除去浮动

具体代码实现

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
45
46
47
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .clearfix:after{
        content:'';
        display: table;
        clear:both;
    }
    .header,.footer{
        height: 30px;
        width: 100%;
        background-color: darkslategrey;
    }
    .container{
        width: 100%;
    }
    .left,.middle,.right{
        float:left;
        min-height:300px;
    }
    .middle{
        margin-left:200px;
        margin-right:220px;
        background-color: aquamarine;
    }
    .left{
        width:200px;
        margin-left: -100%;
        background-color:cornflowerblue;
    }
    .right{
        width:220px;
        margin-left:-220px;
        background-color:darkkhaki;
    }
</style>
<body>
    <div class="header"></div>
    <div class="container clearfix">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div> 
</body>
0%