三列布局三大方案对比总结
CSS三列布局 3种方式详细对比分析:
网页标准结构：左固定侧边栏 + 中间自适应内容 + 右固定侧边栏
一、 inline-block 行内块布局
实现原理
给三个盒子设置 display: inline-block ，让块元素横向并排，分别设定宽度、间距完成三栏排列，搭配 vertical-align: top 统一顶部对齐。
优点：写法简单古老，极低版本浏览器都兼容
其代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 设置视口，适配移动端 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>经典三列布局：通过display改变元素性质来实现</title> <style> /* 全局初始化，清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } /* 顶部导航栏样式 */ #navigator { /* 宽度占满整个屏幕 */ width: 100%; /* 导航栏高度 */ height: 30px; /* 背景颜色：橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } /* 中间内容区域总容器 */ #content { /* 宽度占满整个屏幕 */ width: 100%; /* 内容区域高度 */ height: 800px; } /* 左侧红色栏 */ #div1 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色：红色 */ background-color: red; /* 将块级元素转为行内块元素，实现横向并排 */ display: inline-block; } /* 中间绿色栏（核心） */ #div2 { /* 重要说明： 正常三列总和应为 10% + 80% + 10% = 100% 但是 display: inline-block 元素(行内块元素)之间， 默认规则是HTML代码中的换行、空格会被浏览器解析成一个空白间隙 所以必须把宽度从 80% 缩小为 79%，腾出空间给这个空白间隙 否则三列总宽度会超出100%，导致第三列被挤到下一行 */ width: 79.5%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色：绿色 */ background-color: green; /* 将块级元素转为行内块元素，实现横向并排 */ display: inline-block; } /* 右侧蓝色栏 */ #div3 { /* 宽度占父容器的10% */ width: 10%; /* 高度占父容器的100% */ height: 100%; /* 背景颜色：蓝色 */ background-color: blue; /* 将块级元素转为行内块元素，实现横向并排 */ display: inline-block; } /* 底部页脚样式 */ #footer { /* 宽度占满整个屏幕 */ width: 100%; /* 页脚高度 */ height: 30px; /* 背景颜色：橙色 */ background-color: orange; /* 文字水平居中 */ text-align: center; } </style> </head> <body> <!-- 顶部导航栏 --> <div id="navigator">网页导航栏</div> <!-- 中间三列内容区域 --> <div id="content"> <div id="div1">左侧栏</div> <div id="div2">中间内容区</div> <div id="div3">右侧栏</div> </div> <!-- 底部页脚 --> <div id="footer">网页页脚</div> </body> </html>效果图：
二、position 绝对定位布局
实现原理
父盒子相对定位，左右两栏用 position: absolute 固定左右位置，脱离正常文档流；中间盒子用左右margin，手动让出两侧宽度。
优点：定位精准，左右栏位置完全固定不受内容影响
其代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>经典三列布局：position定位实现</title> <style> /* 全局初始化，清除所有元素默认的内外边距 */ * { margin: 0; padding: 0; } #navigator { width: 100%; height: 30px; background-color: orange; text-align: center; } #content { width: 100%; height: 800px; /* 父容器设置相对定位，作为子元素绝对定位的参考基准 */ position: relative; } #div1 { width: 10%; height: 100%; background-color: red; /* 设置绝对定位，固定在父容器左侧 */ position: absolute; /* 距离父容器左侧0像素 */ left: 0; /* 距离父容器顶部0像素 */ top: 0; } #div2 { width: 80%; height: 100%; background-color: green; /* 设置绝对定位，位于左侧栏右边 */ position: absolute; /* 距离父容器左侧10%（刚好在左侧栏后面） */ left: 10%; /* 距离父容器顶部0像素 */ top: 0; } #div3 { width: 10%; height: 100%; background-color: blue; /* 设置绝对定位，固定在父容器右侧 */ position: absolute; /* 距离父容器右侧0像素 */ right: 0; /* left: 90%; */ /* 距离父容器顶部0像素 */ top: 0; } #footer { width: 100%; height: 30px; background-color: orange; text-align: center; } </style> </head> <body> <div id="navigator">网页导航栏</div> <div id="content"> <div id="div1">左</div> <div id="div2">中</div> <div id="div3">右</div> </div> <div id="footer">网页页脚</div> </body>效果图：
三、Flex 弹性布局（现代首选）
实现原理
父盒子 display: flex 开启弹性布局，左右栏写固定宽度，中间内容 flex:1 自动占满所有剩余空间。
优点：
1. 写法极简，一行代码搞定横向排列
2. 中间栏完美自适应剩余宽度，窗口缩放自动适配
3. 默认等高对齐，垂直水平居中一键控制
4. 自带 gap 设置安全间距，不会重叠、没有缝隙bug
5. 响应式、换行适配极强，移动端完美兼容
其代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex实现三列布局</title> <style> /* 全局初始化，清除默认内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏样式 */ #navigator { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } /* 内容容器：Flex布局核心 */ #content { width: 100%; min-height: 500px; /* 开启Flex布局 */ display: flex; } /* 左侧栏 */ #div1 { background-color: red; /* 电脑端宽度 */ width: 10%; } p { width: 10%; height: 30px; border: 2px black solid; margin-right: 15px; margin-bottom: 15px; } /* 中间内容栏 */ #div2 { background-color: green; /* 电脑端宽度 */ width: 80%; display: flex; /* 允许弹性盒内部的项目自动换行 */ flex-wrap: wrap; /* 弹性盒内部的项目按行向交叉轴起点对齐 */ align-content: flex-start; } /* 右侧栏 */ #div3 { background-color: blue; /* 电脑端宽度 */ width: 10%; } /* 页脚样式 */ #footer { width: 100%; height: 40px; background-color: orange; text-align: center; line-height: 40px; } </style> </head> <body> <div id="navigator">网页导航栏</div> <div id="content"> <div id="div1">左侧栏</div> <div id="div2"> <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > <p>1</p > </div> <div id="div3">右侧栏</div> </div> <div id="footer">网页页脚</div> </body> </html>效果图：
总结：inline缝隙多易错位，定位脱离文档流易乱版，Flex自适应强、写法简单，全能通用