实现css中的三列布局，左右固定宽度，中间自适应。三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变。比较常见的实现方案是：定位，浮动，css3中新特性flex布局，以及流行的圣杯布局，双飞翼布局。
1、自身浮动法
思路：对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间盒子是正常文档流。在html结构中，中间的盒子一定要放置在左右盒子的后面。这样中间的盒子会自动移动到左右盒子下面，并且使用margin指定左右外边距进行定位，以便留出左右盒子的宽度，从而使中间元素自适应屏幕宽度。具体实现如下：
<!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>
.container{
height: 100%;
}
.left,
.right{
width: 200px;
height: 200px;
background-color: pink;
}
.left{
float: left;
}
.right{
float: right;
}
.center{
margin: 0 200px;
min-height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</div>
</body>
</html>
2、绝对定位法：
思路：和浮动法的思路差不多，只不过这里使用绝对定位将使左右盒子脱离文档流，并且html结构中盒子放置顺序是左，中，右。代码实现如下：
<!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>
.container{
position: relative;
height: 100%;
}
.left,
.right{
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
}
.left{
left: 0;
}
.right{
right: 0;
}
.center{
margin: 0 200px;
background-color: purple;
min-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right">right</div>
</div>
</body>
</html>
3、flex布局（推荐）
flex布局实现三列布局有许多思路，这里给出其中一种。给父容器设置样式display：flex，justify-content: space-between。具体代码实现如下：
<!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>
.container{
display: flex;
justify-content: space-between;
height: 100%;
}
.left,
.right{
flex: 0 0 200px; /* 放大的比例 缩小的比例 占父亲整个空间的大小 */
height: 200px;
background-color: pink;
}
.center{
flex: 1; /* 占父容器剩余空间的一份 */
background-color: purple;
min-height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right">right</div>
</div>
</body>
</html>
4、圣杯布局
圣杯布局的原理是margin负值法。为了让中间盒子内容不被遮挡，设置父盒子padding：0 200px，使中间盒子左右两边空出200px区域以便放置左右盒子。并且html结构中盒子放置顺序是中，左，右，并且全部左浮动。然后设置左盒子的 左负外边距，并加上定位，设置右盒子右负外边距。代码如下：
<!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>
.container{
padding: 0 200px;
}
.center{
width: 100%;
background-color:pink;
min-height: 400px;
float: left;
/* margin: 0 200px; 不能用这种方式留出左右两边空白 */
}
.left,
.right{
background-color:purple;
width: 200px;
height: 200px;
float: left;
}
.left{
margin-left:-100%;
position: relative;
left: -200px;
}
.right{
margin-right: -200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
5、双飞翼布局
双飞翼布局是为了解决圣杯布局的弊端提出的，如果在圣杯布局中将浏览器宽度缩短到一定程度的时候，会使得中间子元素的宽度比左右子元素宽度小的时候，这时候布局就会出现问题。但是双飞翼布局缺点是：多加了一层dom节点。所以这里提示在使用圣杯布局的时候一定要设置整个容器的最小宽度。
思路类似圣杯布局，但是为了中间div内容不被遮挡，需在中间div盒子内部创建子盒子，并在该子盒子里用margin-left和margin-right为左右两栏div留出位置。同时，左右两栏盒子只用到了左负边距。
<!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>
.center-container{
width: 100%;
float: left;
/* padding: 0 200px;不能用这种方式留出左右两边空白 */
}
.center{
margin: 0 200px;
background-color:pink;
min-height: 400px;
}
.left,
.right{
background-color:purple;
width: 200px;
height: 200px;
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class=".center-container">
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
6、用到css中calc（不推荐）
使用到css3中计算公式，会影响性能。calc（）的+ 和 - 运算符的两边必须要有空白字符
<!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>
.container{
height: 100%;
}
.center{
width: calc(100% - 400px);
background-color:pink;
min-height: 400px;
float: left;
}
.left,
.right{
background-color:purple;
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="right">right</div>
</div>
</body>
</html>
7、grid/table布局
这是两种特殊的布局，读者可自行探索。
引用小火柴的蓝色理想博客中的一段话:
总结：无论是什么布局方式，无外乎需要应用float、inline-block、table、absolute、flex、grid这6种布局属性，然后再配合负margin、calc()函数、bfc、增加结构等来实现布局。自适应包括两种情况：一种是宽度由内容撑开，一种是宽度自动撑满父元素剩余宽度。可实现宽度由内容撑开的属性有： float、inline、inline-block、table、table-cell、absolute、fixed、flex、grid。可实现宽度自动撑满父元素剩余宽度的属性有： overflow(配合float)、table、flex、grid。
网友评论