前端中布局方式多样，今天我们浅谈一下三栏布局的几种实现方式，希望对你有所帮助。目录什么是三栏布局？1.浮动布局实现：2.flex布局实现3.绝对定位实现4.BFC实现5.table实现：6.网格（grid）布局7.圣杯布局8.双飞翼布局总结：什么是三栏布局？三栏布局：整体高度已知，左右两边宽度固定，中间内容宽度自适应三栏布局常见的实现方式：...
前端中布局方式多样，今天我们浅谈一下三栏布局的几种实现方式，希望对你有所帮助。
目录
什么是三栏布局？
三栏布局：整体高度已知，左右两边宽度固定，中间内容宽度自适应
三栏布局常见的实现方式：
- 浮动布局
- flex布局
- 绝对定位
- BFC
- table
- 网格（grid）布局
- 圣杯布局
- 双飞翼布局
废话不多说，直接上图，关于三栏布局情况如下图所示
1.浮动布局实现：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三栏布局-8种实现</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式1-浮动布局-->
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>CSS代码（less语法）:
*{
margin: 0;
padding
最低0.47元/天 解锁文章
1499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
