所谓三栏布局指的是：两边固定，中间内容自适应。三栏布局在开发中经常见到，效果如图所示：
三栏布局效果
红色和蓝色部分宽度固定，中间宽度自适应。下面我们用不同的方法实现上面的效果。
1.浮动解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现CSS三栏布局</title>
<style>
html *{
margin:0;
padding:0;
}
article div{
min-height: 200px;
}
.layout{
margin-top:10px;
}
</style>
</head>
<body>
<!-- 1.浮动解决方案 -->
<section class="layout layout-float">
<style>
.left-right-center .left{
float:left;
width:300px;
background: red;
}
.left-right-center .right{
float:right;
width:300px;
background: blue;
}
.left-right-center .center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1.这是三栏布局浮动布局的中间部分
</div>
</article>
</section>
</body>
</html>
实现原理：两边使用float固定在左右两侧，留出中间的空白。
优点：结构清晰，实现较为简单，兼容性好。
缺点：
- 主体内容无法最先加载，当页面内容较多时，影响用户体验。
- 浮动会脱离文档流，必要时候，需要清除浮动，如果处理不好的话，页面布局会出现问题。
兼容性：所有主流浏览器都支持
2.绝对定位解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现CSS三栏布局</title>
<style>
html *{
margin:0;
padding:0;
}
article div{
min-height: 200px;
}
.layout{
margin-top:10px;
}
</style>
</head>
<body>
<!-- 2.绝对定位解决方案 -->
<section class="layout layout-absolute">
<style>
.layout.layout-absolute .left-center-right>div{
position:absolute;
}
.layout-absolute .left{
background: red;
left:0;
width:300px;
}
.layout-absolute .center{
background: yellow;
left:300px;
right:300px;
}
.layout-absolute .right{
background: blue;
right:0;
width:300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
2.这是三栏布局绝对定位布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
优点：结构简单，快捷，好处理
缺点：使用了绝对定位布局，脱离文档流，下面所有的子元素必须脱离文档流，可使用性差。
兼容性：所有主流浏览器都支持
3.flexbox布局解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现CSS三栏布局</title>
<style>
html *{
margin:0;
padding:0;
}
article div{
min-height: 200px;
}
.layout{
margin-top:10px;
}
</style>
</head>
<body>
<!-- 3.flex布局解决方案 -->
<section class="layout layout-flex">
<style>
.layout.layout-flex .left-center-right{
display: flex;
}
.layout-flex .left{
width:300px;
background: red;
}
.layout-flex .center{
background: yellow;
flex:1;
}
.layout-flex .right{
width:300px;
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flex解决方案</h1>
3.这是三栏布局flex布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
原理：
优点：
- 结构简单直观
- 可以结合
flex的其他功能实现更多效果，例如使用order属性调整显示顺序，让主题内容优先加载，但展示在中间
缺点：需要IE10以上支持，会产生高度自适应的问题，因为flex分配完剩余空间之后，默认高度会使外层div的高度，比如中间的div撑开高度之后，两边的div也会随着外部div高度的变化而变化
兼容性：如下图所示：
flexbox兼容性
4.表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现CSS三栏布局</title>
<style>
html *{
margin:0;
padding:0;
}
article div{
min-height: 200px;
}
.layout{
margin-top:10px;
}
</style>
</head>
<body>
<!-- 4.table布局解决方案 -->
<section class="layout layout-table">
<style>
.layout.layout-table .left-center-right{
display: table;
width:100%;
height:200px;
}
.layout-table .left-center-right>div{
display: table-cell;
}
.layout-table .left{
width:300px;
background: red;
}
.layout-table .center{
background: yellow;
}
.layout-table .right{
background: blue;
width:300px;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>table布局解决方案</h1>
4.这是三栏布局table布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
原理：
- 外层通过
display:table设置表格 - 内层的左中右通过
display:table-cell设置为表格单元 - 左右设置固定宽度，中间设置
width:100%填充剩下的宽度
优点：
- 结构简单直观
- table作为一个整体结构兼容性好，相比多个div浮动组合更加稳定
缺点：内层元素展示为table-cell，margin会失效，只能在left-center-right为所有元素设置间隔，或内部增加一层来设置margin
5.网格布局解决方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现CSS三栏布局</title>
<style>
html *{
margin:0;
padding:0;
}
article div{
min-height: 200px;
}
.layout{
margin-top:10px;
}
</style>
</head>
<body>
<!-- 5.网格布局解决方案 -->
<section class="layout layout-grid">
<style>
.layout-grid .left-center-right{
display:grid;
grid-template-rows:100px;
grid-template-columns:300px auto 300px;
}
.left{
background: red;
}
.center{
background: yellow;
}
.right{
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>网格布局解决方案</h1>
5.这是三栏布局网格布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
原理：通过给父容器设置display:grid;创建一个网格容器，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小
优点：结构简单
兼容性：Grid兼容性
需要下载的童鞋可以移步到：CSS三栏布局的不同实现方法，欢迎Star
版权归作者所有，如有转载，请注明来源
网友评论