三列布局就是左右两栏定宽且不一定相等，中间一栏自适应。
假设我们要实现一个左边固定200px，右边固定300px，中间自适应的布局。
有以下几种方法：
1.圣杯布局
这种方式的DOM顺序一定要是middle在前，然后是left和right。
HTML代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="3columns.css"/>
</head>
<body>
<div class="container">
<div class="middle">
<p>middle</p>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
CSS代码如下：
html,body{
padding:0;
margin:0;
}
.container{
padding-left:200px;
padding-right:300px;
}
.left{
float:left;
margin-left:-100%;
position:relative;
left:-200px;
width:200px;
height:300px;
background-color: red;
}
.right{
float:left;
margin-left:-300px;
position:relative;
right:-300px;
width:300px;
height:350px;
background-color: blue;
}
.middle{
float:left;
height:400px;
width:100%;
background-color: yellow;
}
2.双飞翼布局
需要给中间部分加一个父容器
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="3columns.css"/>
</head>
<body>
<div class="container">
<div class="middle-box">
<div class="middle">
<p>middle</p>
</div>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
CSS代码：
html,body{
padding:0;
margin:0;
}
.left{
float:left;
margin-left:-100%;
width:200px;
height:300px;
background-color: red;
}
.right{
float:left;
margin-left:-300px;
width:300px;
height:350px;
background-color: blue;
}
.middle-box{
float:left;
height:400px;
background-color: yellow;
width:100%;
}
.middle{
margin-left:200px;
margin-right:300px;
}
3.弹性布局
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="2columns.css"/>
</head>
<body>
<div class="container">
<div class="middle">
<p>middle</p>
</div>
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
CSS代码：
html,body{
padding:0;
margin:0;
}
.container{
display:flex;
}
.left{
order:1;
flex-basis:200px;
height:300px;
background-color: red;
}
.middle{
order:2;
flex:1;
height:400px;
background-color: yellow;
}
.right{
order:3;
flex-basis:300px;
height:350px;
background-color: blue;
}
4.绝对布局
HTML中DOM顺序随意
CSS代码：
html,body{
padding:0;
margin:0;
}
.container{
position:relative;
}
.left{
position:absolute;
top:0;
left:0;
width:200px;
height:300px;
background-color: red;
}
.middle{
margin-left:200px;
margin-right: 300px;
height:400px;
background-color: yellow;
}
.right{
position:absolute;
top:0;
right:0;
width:300px;
height:350px;
background-color: blue;
}
