想必在前端奋战的大伙们都知道三栏布局，它有各种各样的实现方法，那么我们又该如何选择呢？其实它们都大差不差，选择哪一个纯看自己心情，哪个简单用哪个呗。
三栏布局
在Web设计中，三栏布局是一种常见的网页结构，广泛应用于新闻网站、博客、论坛以及内容密集型的页面。这种布局就是一个主内容区域配两个一左一右的边栏，边栏通常用于展示广告、菜单或其他辅助信息，像我们掘金用的就是典型的三栏布局。
三个栏：左边菜单、中间文章、右边堆一些其他关键的模块。
三栏布局的关键
- 必须让主要内容的加载优先于侧栏内容的加载。不然你让用户先看广告？好好好，你是懂盈利的。
- 左右固定，中间自适应：页面的整个宽我们是不能保证它的大小的，所以我们不能把它们的宽度写死，这里需要把左右两栏固定大小，让主要内容自适应。
各种实现方式
圣杯布局：
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
height: 200px;
padding: 0 200px;
}
.left,.right {
height: 200px;
width: 200px;
background: #1adc20;
}
.content {
width: 100%;
background:yellow;
height: 100%;
}
.page div{
float: left;
}
.left{
margin-left:-200px;
position: relative;
left:-100%;
}
.right{
margin-right: -200px;
}
</style>
</head>
<body>
<div class="page">
<div class="content">主要内容</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
</body>
</html>通过 float 属性使所有栏浮动，然后利用负边距使左右两栏"挤"进中间栏的空间，从而实现固定宽度而不影响中间栏内容。至于为什么叫这个名呢，我也很知道...
双飞翼布局：
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼</title>
<style>
* {
padding: 0;
margin: 0;
}
.page {
height: 200px;
}
.left,
.right {
width: 200px;
height: 200px;
background: greenyellow;
}
.content{
height: 100%;
background:pink;
width: 100%;
}
.inner{
margin:0 200px;
height: 100%;
}
.page>div{
float: left;
}
.left{
margin-left:-100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="page">
<div class="content">
<div class="inner">主要内容</div>
</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
</body>
</html>在中间栏内部嵌套另一个 div，通过设置嵌套元素的 margin来实现与左右两栏的对齐，而中间栏本身保持100%宽度。
弹性布局：
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
height: 200px;
font-size: 0;
display: flex;
}
.left,
.right {
height: 200px;
width: 200px;
background: #1adc20;
}
.content {
height: 200px;
background: #dfef04;
width: calc(100vw - 400px);
flex:1;
order:1;
}
.page div{
display: inline-block;
font-size:20px;
}
.right{
order:2;
}
</style>
</head>
<body>
<div class="page">
<div class="content">主要内容</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
</body>
</html>运用CSS中的 order属性指定容器内元素的排列顺序。
结语
这三种就是常见的三栏布局的实现方式，实现起来其实很简单，但就是细节不能丢了。布局设计不仅关乎美学，更是用户体验和信息架构的重要组成部分。