三栏布局一般是指：左右宽度固定，中间自适应
常见的布局方式: Position定位、table布局、弹性(flex)布局、网格(grid)布局
<div class="container">
<div class="left"> 左侧固定</div>
<div class="center">中间自适应</div>
<div class="right">右侧固定</div>
</div>
一.绝对（position）定位布局
三栏全部加绝对定位
.container{position: relative;}
.left{width: 200px;height: 200px;position: absolute;left:0;background-color: yellow;}
.center{height: 200px;background-color: green;position: absolute;left: 200px;right: 200px;}
.right{width: 200px;height: 200px;background-color: aqua;position: absolute;right: 0;}
二.左右浮动布局
*{margin: 0;padding: 0;}
.left {float: left;width: 200px;background: #ffbbff;}
.center {margin: 0 150px 0 200px;background: #bfefff;}
.right {float: right;width: 150px;background: #eeee00;}
三.圣杯布局
使用float布局框架 ， 用margin为负值 ， position: relative定位
*{margin: 0;padding: 0;}
.container{height: 200px;padding: 0 150px 0 200px;background: greenyellow;*zoom: 1;}
.left,.center,.right{float: left;}
.center{width: 100%;height: 200px;background-color:red;}
.left {position: relative;width: 200px;height: 200px;left:-200px;margin-left: -100%;
background: green;}
.right {position: relative;width: 150px;height: 200px;left:-200px;margin-left: -200px;
background-color: chocolate;}
优点
（1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
（2）可以实现主要内容的优先加载
四.双飞翼布局
通过左浮动配合margin属性实现，
<style>
*{margin: 0;padding: 0;}
.column{float: left;height: 200px;}
.container{overflow: hidden;}
.center{width: 100%;}
.center-inner{margin: 0 150px 0 200px;height: 200px;background-color: chartreuse;}
.left{width: 200px;margin-left: -100%;background-color: #FFBBFF;}
.right{width: 150px;margin-left: -150px;background-color: aqua;}
</style>
</head>
<body>
<div class="container">
<div class="column center">
<div class="center-inner">center</div>
</div>
<div class="column left">left</div>
<div class="column right">right</div>
</div>
比较经典的三栏布局方式。
缺点是多了一层包裹center内容的代码，三栏高度不统一，需要分别设置。
五.Flex布局
*{margin: 0;padding: 0;}
.column{height: 200px;}
.container{display: flex;}
.center{width: 100%;order: 2;flex:1;background-color: chartreuse;}
.left{width: 200px;order: 1;background-color: #FFBBFF;}
.right{width: 150px;order: 3;background-color: aqua;}
实际高度会根据内容自适应，三栏高度统一。
Flex布局在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
六.Grid布局
*{margin: 0;padding: 0;}
.container{display: grid;grid-template-columns: 200px auto 150px;width: 100%;}
.column{height: 200px;}
.center{grid-row: 1/2;grid-column: 2/3;background-color: chartreuse;}
.left{grid-row: 1/2;grid-column: 1/2;background-color: #FFBBFF;}
.right{grid-row: 1/2;grid-column: 3/4;background-color: aqua;}
实际高度会根据内容自适应，三栏高度统一。
唯一的缺点就是兼容性不太好。
三栏布局.png
网友评论