Hi！大家好！欢迎大家进入我的博客！
现在好多的大公司写页面的时候都会用到三栏布局，接下来要说的圣杯布局就是三栏布局中较为典型的例子。特点是，左右边栏宽度固定，中间栏宽度自适应。废话不多说直接上代码。
圣杯布局：
我们先看看最终实现的效果
1、首先看一下html中的结构。（因为浏览器加载html文档的顺序是由上到下的，我们想让中间栏先加载，我们只能把中间栏放在最前面）
2、接下来我们让middle（中间栏）的宽度为100%，然后在给左右边栏设置宽高。
.main {
width: 100%;
height: 400px;
}
.middle {
width: 100%;
background: #fd8c84;
height: 400px;
}
/*给左边和右边的元素设置属性*/
.left {
width: 100px;
height: 400px;
background: red;
}
.right {
width: 100px;
height: 400px;
background: #1d9fd3;
}
我们来看一下效果
当然这个样子肯定是不行的，我们接下来在对这个样式进行修饰
3、我们得保证这三个盒子在同一行显示，我们最先想到的当然是float，所以我们给这三个盒子设置float（一浮全浮）。
/*三栏布局指定是让他们在一行显示：所以我们最先想到的方法就是float*/
.middle, .left, .right {
float: left;
}
你会发现就算设置了浮动他们还不在同一行显示，这是为什么呢？
别着急，那是因为我们给middle的宽度设置了100%，所以第一行没有位置了，他们只能在第二行显示喽！
但是我们可以假装他们两个在第一行
4、我们给middle的父元素设置padding然他把自己的内容压缩，空出来的部分用来放左右边栏。
这里我们为什么要用padding呢？因为我们可以通过box-sizing:border-box;来控制
.main {
padding: 0 100px;
box-sizing: border-box;
}
这是你会发现中间栏的两边会有100px的留白，这正是我们要的效果
5、重点部分：利用margin负值的思想
1>先将左边的盒子放在对应的位置
.left {
position: relative;
left: -100px;
margin-left: -100%;
}
注意：我们给左边的盒子设置完margin-left:-100%;的时候他会和middle的左边重合，所以我们给他加了相对定位（相对自己原来的位置）。
2>同理右边的盒子也做同样的操作
.right {
margin-left: -100px;
position: relative;
left: 100px;
}
通过上面5个步骤我们最终实现了圣杯布局。
全部代码：
<!DOCTYPE html >
<html lang="en">
<head>
<meta name="keywords" content="">
<meta name="description" content="">
<title>双飞翼和圣杯布局</title>
<style type="text/css">
/*个人理解，双飞翼和圣杯布局之不过就是三栏布局中特殊的写法，下面先对圣杯布局进行解析*/
/*第一步：让中间元素的宽度为100%*/
.main {
width: 100%;
height: 200px;
}
.middle {
width: 100%;
background: #fd8c84;
height: 200px;
}
/*给左边和右边的元素设置属性*/
.left {
width: 100px;
height: 200px;
background: red;
position: relative;
left: -100px;
margin-left: -100%;
}
.right {
width: 100px;
height: 200px;
background: #1d9fd3;
margin-left: -100px;
position: relative;
left: 100px;
}
/*三栏布局指定是让他们在一行显示：所以我们最先想到的方法就是float*/
.middle, .left, .right {
float: left;
}
/*我们会发现他们并不在同一行，因为middle盒子的宽度是100%，所以我们如果想让他们上去
我们只能在middle挤出来位置来放置left和right这两个盒子
这里我们想到用padding， 因为这里如果用margin，你会发现这个页面会有一个横向的滚动条
其实padding也会出现横向的滚动条，但是我们可以通过box-sizing:border-box;这个属性来控制*/
.main {
padding: 0 100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="main">
<div class="middle"><h2>我是中间元素</h2></div>
<div class="left"><h2>我是左边元素</h2></div>
<div class="right"><h2>我是右边元素</h2></div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/ying-jian/p/10092191.html