1.float+margin（自适应的那个元素），适应横向布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left {
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
float: right;
}
.zhong {
height: 500px;
margin: 0 200px;
background-color: #f0f;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="zhong"></div>
</body>
</html>
2.float+绝对定位（自适应的那个元素），适应横向布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left {
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
float: right;
}
.zhong {
height: 500px;
position: absolute;
left:200px;
right:200px;
background-color: #f0f;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="zhong"></div>
</body>
</html>
3.绝对定位+绝对定位（自适应的那个元素），适应横向布局，竖向布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left {
width: 200px;
height: 500px;
background-color: red;
position: absolute;
left: 0px;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
position: absolute;
right: 0px;
}
.zhong {
height: 500px;
position: absolute;
left:200px;
right:200px;
background-color: #f0f;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="zhong"></div>
</body>
</html>
4. 中间那个先用box包裹，box和左右采用float，然后left用margin-left：-100%；right用margin-left：-200px；
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.box{
width: 100%;
height: 100%;
float: left;
}
.zhong {
height: 500px;
background-color: #f0f;
margin: 0 200px;
}
.left {
width: 200px;
height: 500px;
background-color: red;
left: 0px;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="zhong"></div> <!--这里注意 -->
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
5.圣杯布局和双飞翼布局
区别：圣杯布局和双飞翼布局解决的问题都是一样的。两边固定宽度，中间自适应的三栏布局，已经由此演变出来的类似其他布局格式。中间布局代码要写在 前边，保证第一个渲染
（1）父元素包含三个元素
（2）中间的盒子宽度设置为100%，自适应，并且在三个元素的最前面显示，第一个渲染
其实双飞翼布局多了一个box包裹
1.圣杯布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.container {
height: 500px;
overflow: hidden;
/*清除浮动 */
}
.zhong {
height: 500px;
background-color: #f0f;
left: 200px;
right: 200px;
position: absolute;
}
.left {
width: 200px;
height: 500px;
background-color: red;
left: 0px;
float: left;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
float: right;
}
.head,
.foot {
width: 100%;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="container">
<div class="zhong"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="foot">foot</div>
</body>
</html>
2.双飞翼布局
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.container{
height: 500px;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
float: left;
}
.zhong {
height: 500px;
background-color: #f0f;
margin: 0 200px;
}
.left {
width: 200px;
height: 500px;
background-color: red;
left: 0px;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 500px;
background-color: #00f;
float: left;
margin-left: -200px;
}
.head,
.foot {
width: 100%;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="container">
<div class="box">
<div class="zhong"></div>
<!--这里注意 -->
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="foot">foot</div>
</body>
</html>
