目录
一、概述
圣杯布局与双飞翼布局针对的都是三栏布局，左右栏固定，中间栏自适应的网页布局。以下介绍三种实现方式，html结构如下所示。
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
二、详解
相对布局
相对布局中main元素必须是container元素的第一个子元素。
.container {
width: 100%;
min-height: 300px;
padding: 0 60px;
box-sizing: border-box;
}
.container > div {
position: relative;
float: left;
}
.left, .right {
width: 60px;
height: 100%;
}
.left {
left: -60px;
margin-left: -100%;
}
.right {
right: 0;
margin-right: -100%;
}
.main {
width: 100%;
height: 100%;
}
flex布局
.container {
width: 100%;
min-height: 300px;
display: flex;
}
.main {
flex-grow: 1;
}
.left {
order: -1;
flex-basis: 60px;
}
.right {
flex-basis: 60px;
}
绝对布局
.container {
width: 100%;
min-height: 300px;
position: relative;
}
.container > div {
position: absolute;
}
.left, .right {
width: 60px;
height: 100%;
}
.main {
width: calc(100% - 120px);
height: 100%;
left: 60px;
}
.left {
left: 0;
}
.right {
right: 0;
}