一、介绍
下边将介绍前端很流行的布局方式，要求两边固定，中间自适应。比较流行的布局方式有圣杯布局，双翼布局，flex布局、绝对定位布局。
二、圣杯布局
圣杯布局，顾名思义，他具有以下特点：
1.三列布局，中间自适应，两边定宽；
2.中间栏要求在浏览器中优先展示；
接下来我们看实现方式：
div我们这样写：
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
下边直接看代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<style type="text/css">
.container {
padding: 0 300px 0 200px;
}
.left, .main, .right {
position: relative;
min-height: 130px;
float: left;
}
.left {
left: -200px;
margin-left: -100%;
background: green;
width: 200px;
}
.right {
right: -300px;
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
出来的样子就是这样：
代码中main的宽度设为100%，left跟right刚好固定到了左右两边。其中使用了一个margin-left为负的值，负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，因为被left遮住了），left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。 接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。
三、双翼布局
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。 代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">
.left, .main, .right {
float: left;
min-height: 130px;
text-align: center;
}
.left {
margin-left: -100%;
background: green;
width: 200px;
}
.right {
margin-left: -300px;
background-color: red;
width: 300px;
}
.main {
background-color: blue;
width: 100%;
}
.content{
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。
四、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之Flex布局</title>
<style type="text/css">
.container{
display: flex;
min-height: 130px;
}
.main{
flex-grow: 1;
background-color: blue;
}
.left{
order: -1;
flex-basis: 200px;
background-color: green;
}
.right{
flex-basis: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
五、绝对定位布局
绝对定位布局就是相当于把左右两个div绝对定位到左右两边的padding就可以了，这里就不写代码了。
本文参考CSDN 作者 萌主_iii 。
原文地址：https://www.cnblogs.com/superSmile/p/9823457.html