1 引言
三栏布局是比较常见的一种网页布局方式,其基本要求是分左中右三栏,左右两栏等宽,中间栏宽度自适应,大致效果如下图所示。
实现三栏布局的方式有很多,本文主要介绍三种简单常用的方案:浮动布局方案、弹性布局方案、网格布局方案还有一个逼格高的双飞翼布局方案。
2 浮动布局方案
浮动布局方案的基本思路是利用float:left
和float:right
实现,并注意要将两侧栏放在中心内容前面,代码如下:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sidebar {
background: red;
height: 100px;
width: 50px;
float: left;
}
.rightbar{
float: right;
}
.main {
background: blue;
height: 100px;
overflow: auto; /* 创建bfc(block formating context)避免内容被浮动div遮挡*/
}
</style>
</head>
<body>
<p>三栏布局</p
<div class="layout">
<div class="sidebar leftbar">left</div>
<div class="sidebar rightbar">right</div>
<div class="main">center</div>
</div>
</body>
</html>
demo参看链接CodePen
3 弹性布局方案
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
}
.sidebar {
background: red;
height: 100px;
width: 50px;
}
.main {
background: blue;
height: 100px;
flex: 1;
}
</style>
</head>
<body>
<p>三栏布局</p>
<div class="container">
<div class="sidebar leftbar">left</div>
<div class="main">center</div>
<div class="sidebar rightbar">right</div>
</div>
</body>
</html>
4 网格布局方案
主要利用了强大的网格布局的 grid-template-columns属性,代码如下:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sidebar {
background: red;
height: 100px;
width: 50px;
}
.main {
background: blue;
height: 100px;
}
.grid3column {
display: grid;
grid-template-columns: 50px 1fr 50px;/*fr是网格轨道的弹性系数flexratio*/
}
</style>
</head>
<body>
<p>三栏布局</p>
<div class="grid3column">
<div class="sidebar leftbar">left</div>
<div class="main">center</div>
<div class="sidebar rightbar">right</div>
</div>
</body>
</html>
效果
5 双飞翼布局
为了便于中间包含内容的div优先加载,双飞翼布局会将中div放在最前面,html部分代码如下
<div class="layout">
<div class="center">cneter</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
双飞翼布局主要分为4步:
- 使用float:left使左中右3个div向左浮动布局,并且将中div的width设为父div宽度
.layout {
width: 800px;
height: 100px;
border: 1px solid black;
}
.layout div {
float: left;
}
.center {
background-color: red;
width: 100%;
}
- 第1步会导致左右div被挤到第二行,使用负margin值(正margin表示相隔距离,负margin可以理解成反向的相叠)可以使3个div处于同一水平线,但中div的部分content会被左div覆盖
.left {
background-color: green;
width: 200px;
margin-left: -100%; /* 距父容器右边界100%且在其左侧 */
}
.right {
background-color: blue;
width: 200px;
margin-left: -200px;
}
- 在中div内在添加一个内容div,并将其左右margin分别设为左右两栏的宽度
<div class="layout">
<div class="center">
<div class="content">cneter</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
- 最后记得给父容器清除浮动(因浮动布局导致的内容坍缩问题,即下图的黑色边框塌陷为一条线了)
.layout {
width: 800px;
height: 100px;
border: 1px solid black;
overflow: auto; /* 清除浮动 */
}
.content {
margin-left: 200px;
margin-right: 200px;
}
最后附上完整的双飞翼布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout {
width: 800px;
height: 100px;
border: 1px solid black;
overflow: auto; /* 清除浮动 */
}
.layout div {
float: left;
}
.center {
background-color: red;
width: 100%;
}
.content {
margin-left: 200px;
margin-right: 200px;
}
.left {
background-color: green;
width: 200px;
margin-left: -100%;
}
.right {
background-color: blue;
width: 200px;
margin-left: -200px;
}
</style>
</head>
<body>
<p>双飞翼布局</p>
<div class="layout">
<div class="center">
<div class="content">cneter</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
demo演示参看链接CodePen
6 总结
前3种方案相对更简单,第一种div左右中排列,主要就是使用浮动布局和bfc避免被浮动元素遮挡,第二种和第三种左中右排列,一个直接使用网格水平布局实现, 一个直接使用弹性布局实现;最后一种方案中左右排列,要相对复(bi)杂(ge)一(geng)些(gao),主要内容会优先加载,综合运用了浮动布局、负margin属性、清除浮动等技术。当然网上还有一些其它的实现方案,比如用绝对定位absolute position实现、用表格布局table/table-cell实现以及与双飞翼布局类似的圣杯布局(浮动+负margin+含有负值的relative position),CSS提供了各式各样的布局方案,基本都可以实现三栏布局,掌握几种常用的即可。
参考资料:
[1] 三栏布局的多种实现
[2] 深入负CSS边距
[3] MDN:grid-template-columns
[4] MDN:含有负值的position实验