三栏布局

Posted on Edited on In
三栏布局，左右固定宽度，中间宽度自适应。常见的如圣杯布局，淘宝的双飞翼布局，双飞翼布局的Dom结构比较复杂，与之相比圣杯布局的Dom结构更加简洁，但是都利用了`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
.container{
    margin-left: 240px;
    margin-right: 120px;
}
.container > div{
    float:left;
}
.content{
    width: 100%;
    height: 300px;
    background-color: green;
}
.left{
    width:220px;
    height: 300px;
    margin-left: -100%;
    position: relative;
    left: -240px;
    background-color: yellow;
}
.right{
    width: 100px;
    height: 300px;
    margin-left: -100px;
    background-color: pink;		
    position: relative;
    right: -120px;	
}
.container::after{
    content: '';
    display: block;
    clear: both;
}

双飞翼布局

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
.container{
    overflow: hidden;
    height: 300px;
}
.container > div{
    float:left;
}
.content{
    width: 100%;
    height: 300px;
}
.middle{
    margin-left:240px;
    margin-right: 120px;
    height: 300px;
    background-color: green;
}
.left{
    margin-left: -100%;
    width:220px;
    height: 300px;
    background-color: yellow;
}
.right{
    margin-left: -100px;
    width: 100px;
    height: 300px;
    background-color: pink;			
}

Flex布局

Flex布局的缺点是兼容性问题，如果IE10+还是没有问题的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container{
    height: 100%;
    display: flex;
}
.left{
    height:100%;
    width: 100px;
    background-color: yellow;
    flex-shrink: 0;
    order: -1;
}
.main{
    height: 100%;
    background-color: green;
    flex-grow: 1;
    margin:0 20px;
}
.right{
    height: 100%;
    width: 200px;
    background-color: pink;
    flex-shrink: 0;
}

流式布局

流式布局的缺点是，不能使content内容优先渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.container{
    height: 300px;
    overflow: hidden;
    /*display: flow-root;*/
}
.content{
    margin-left: 240px;
    margin-right: 120px;
    height: 300px;
    /*overflow: hidden;*/
    background-color: green;
}
.left{
    float:left;
    width:220px;
    height: 300px;
    background-color: yellow;
}
.right{
    float: right;
    width: 100px;
    height: 300px;
    background-color: pink;			
}

绝对定位布局

绝对定位布局，简单实用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.container{
    position: relative;
}
.center{
    margin: 0 120px;
    height: 300px;
    background-color: pink;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    height: 300px;
    width: 100px;
    background-color: yellow;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    height: 300px;
    width: 100px;
    background-color: green;
}

参考链接：

https://zhuanlan.zhihu.com/p/25070186