目录
一、概述
三栏布局是一种很常见的布局方式,要求左右侧边栏固定宽度,中间栏自适应。以下介绍三种实现方式,html结构如下所示。
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
二、详解
相对布局
相对布局指圣杯布局&双飞翼布局。
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;
}