平时开发或者笔试的时候，实现三栏布局经常会遇到这样的场景。 具体要求如下：
高度为100px，左右列长度固定为300px，中间列长度自适应。
有许多可以实现的布局方案，在这里探索它们。
浮动布局方案
实现思路：
通过使左右列固定和浮动，并设置中间列的左右外距，使三列自适应
这是另一种实现方法。 在中间列创建BFC也可以实现自适应。 原则是浮动不会影响BFC中的内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-浮动布局方案</title>
<style>
.left, .right, .main {
height: 100px;
}
.left {
width: 300px;
float: left;
background: red;
}
.right {
width: 300px;
float: right;
background: blue;
}
.main {
margin-left: 300px;
margin-right: 300px;
background: yellow;
}
</style>
</head>
<body>
<article>
<aside class="left">left</aside>
<aside class="right">right</aside>
<main class="main">main</main>
</article>
</body>
</html>
缺点：
内容解释的顺序与DOM结构不一致，主要内容较晚加载，一定程度上影响了用户体验。 当长度减少到不足以显示三列时，左边的列会被挤到底部
兼容性：
PC端支持IE6+、Firefox2+、Chrome1+联通端支持iOSSafari1.0、Android浏览器1.0绝对定位布局方案
实现思路：
容器设置为相对定位，左右列分别使用绝对定位，中间列减少左右外距实现自适应
还有一种思路，左右列绝对定位在左侧，中间列也使用绝对定位css3三栏布局，左右距离设置为300px
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-绝对定位方案</title>
<style>
.container {
position: relative;
}
.main, .left, .right {
height: 100px;
}
.main {
margin-left: 300px;
margin-right: 300px;
background: yellow;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 300px;
background: red;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 300px;
background: blue;
}
</style>
</head>
<body>
<article class="container">
<main class="main">main</main>
<aside class="left">left</aside>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
当父元素必须定位（使用非静态定位方式）并且长度减少到无法显示主要内容时，主要内容会被覆盖而无法显示
优势：
可以先加载内容
兼容性：
PC端支持IE6+、Firefox2+、Chrome1+联通端未知Flex布局方案
实现思路：
将容器设置为flex，然后将左右列设置为固定长度且不可扩展css3三栏布局，将中间列设置为手动扩展
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-弹性盒布局方案</title>
<style>
.container {
display: flex;
}
.left, .main, .right {
height: 100px;
}
.left {
flex: 0 0 300px;
background: red;
}
.main {
flex: 1 1 auto;
background: yellow;
}
.right {
flex: 0 0 300px;
background: blue;
}
</style>
</head>
<body>
<article class="container">
<aside class="left">left</aside>
<main class="main">main</main>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
难以兼容低版本浏览器
优势：
代码简单，DOM结构清晰，主流实现方式
兼容性：
PC端支持IE10及以上、Edge12、chrome21、firefox28、safari6.1（部分支持IE10，全面支持其他浏览器版本）联通端支持iOSSafari7、androidbrowser4.4网格布局方案
实现思路：
设置容器为grid，然后设置行高为100px，并设置三列的长度
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-网格布局方案</title>
<style>
.container {
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px 1fr 300px;
}
.left {
background: red;
}
.main {
background: yellow;
}
.right {
background: blue;
}
</style>
</head>
<body>
<article class="container">
<aside class="left">left</aside>
<main class="main">main</main>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
兼容性比flexbox差，但大部分较新版本的浏览器已经支持
优势：
代码简单，DOM结构清晰
兼容性：
PC端支持IE10及以上、Edge16、chrome57、firefox52、safari10.1（部分支持IE10，其他浏览器为初始版本全面支持）联通支持iOSSafari10.3、androidbrowser67表格布局方案
实现思路：
设置容器为table，长度为100%，子元素设置为table-cell
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-表格布局方案</title>
<style>
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
height: 100px;
}
.left {
width: 300px;
background: red;
}
.main {
background: yellow;
}
.right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<article class="container">
<aside class="left">left</aside>
<main class="main">main</main>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
非语义的
优势：
兼容浏览器版本低
兼容性：
PC支持IE8+、Firefox3+、Chrome4+、Safari3.1+联通支持iOSSafari3.2、androidbrowser2.1圣杯布局
实现思路：
三列布局是通过将左右列悬挂在容器的一侧来实现的，形状像圣杯
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-圣杯布局方案</title>
<style>
.container {
margin-left: 300px;
margin-right: 300px;
overflow: hidden;
}
.main, .left, .right {
height: 100px;
}
.main {
float: left;
width: 100%;
background: yellow;
}
.left {
float: left;
margin-left: -100%;
width: 300px;
position: relative;
left: -300px;
background: red;
}
.right {
float: left;
margin-left: -300px;
width: 300px;
position: relative;
left: 300px;
background: blue;
}
</style>
</head>
<body>
<article class="container">
<main class="main">main</main>
<aside class="left">left</aside>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
当中间列长度小于左边列长度时，布局就会混乱
优势：
支持内容优先加载
兼容性：
参考浮动布局方案和双飞翼布局方案
实现思路：
基于圣杯布局，引入容器放置中柱，并设置中柱外距，无需使用相对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三栏布局-双飞翼布局方案</title>
<style>
.main .in, .left, .right {
height: 100px;
}
.main {
float: left;
width: 100%;
}
.main .in {
margin-left: 300px;
margin-right: 300px;
background: yellow;
}
.left {
float: left;
width: 300px;
margin-left: -100%;
background: red;
}
.right {
float: right;
width: 300px;
margin-left: -300px;
background: blue;
}
</style>
</head>
<body>
<article class="container">
<main class="main">
<div class="in">main</div>
</main>
<aside class="left">left</aside>
<aside class="right">right</aside>
</article>
</body>
</html>
缺点：
DOM结构比较复杂
优势：
支持内容优先加载相对于圣杯布局，长度减少，布局不会混乱
兼容性：
参考浮动布局方案
欢迎来到个人博客blog.bookcell.org/
参考
