圣杯布局与双飞翼布局

2019-10-01
#前端

效果：三列布局，中间主体内容前置且宽度自适应，两边内容定宽

圣杯布局

1
2
3
4
5
<div id="container">
    <div id="center">center</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
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
html, body {
    height:100%; 
} 
#container {
    height:100%;
    padding: 0 200px;  
}   
#center {
    width: 100%; 
    height: 100%;
    float: left; 
}
#left,#right {
    width: 200px;
    height: 100%;
    float: left; 
    position: relative;
}
#left { 
    margin-left: -100%; 
    left: -200px;  
}
#right { 
    margin-right: -200px;   
}

双飞翼布局

对圣杯布局的改进，消除相对定位布局

1
2
3
4
5
<div id="container">
    <div id="center">center</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html, body {
    height:100%; 
} 
#container {
    width: 100%;
    height: 100%;
    float: left; 
}
#center {
    width: 100%;
    height: 100%;
    margin: 0 200px;
}
#left, #right {
    width: 200px;
    height: 100%;
    float: left; 
}
#left {
    margin-left: -100%;
}
#right {
    margin-left: -200px;
}

Flex实现

1
2
3
4
5
<div id="container">
    <div id="center">center</div> 
    <div id="left">left</div>
    <div id="right">right</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html,body { 
    height: 100%;  
} 
#container { 
    width: 100%;
    height: 100%;
    display: flex;
}
#center {
    height: 100%;
    flex: 1; 
}
#left, #right {
    height: 100%;
    flex: 200px;
} 
#left {
    order: -1;
}