CSS三列布局 3种方式详细对比分析:网页标准结构左固定侧边栏 中间自适应内容 右固定侧边栏一、 inline-block 行内块布局实现原理给三个盒子设置 display: inline-block 让块元素横向并排分别设定宽度、间距完成三栏排列搭配 vertical-align: top 统一顶部对齐。优点写法简单古老极低版本浏览器都兼容其代码如下!DOCTYPE html html langen head meta charsetUTF-8 !-- 设置视口适配移动端 -- meta nameviewport contentwidthdevice-width, initial-scale1.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 idnavigator网页导航栏/div !-- 中间三列内容区域 -- div idcontent div iddiv1左侧栏/div div iddiv2中间内容区/div div iddiv3右侧栏/div /div !-- 底部页脚 -- div idfooter网页页脚/div /body /html效果图二、position 绝对定位布局实现原理父盒子相对定位左右两栏用 position: absolute 固定左右位置脱离正常文档流中间盒子用左右margin手动让出两侧宽度。优点定位精准左右栏位置完全固定不受内容影响其代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 idnavigator网页导航栏/div div idcontent div iddiv1左/div div iddiv2中/div div iddiv3右/div /div div idfooter网页页脚/div /body效果图三、Flex 弹性布局现代首选实现原理父盒子 display: flex 开启弹性布局左右栏写固定宽度中间内容 flex:1 自动占满所有剩余空间。优点1. 写法极简一行代码搞定横向排列2. 中间栏完美自适应剩余宽度窗口缩放自动适配3. 默认等高对齐垂直水平居中一键控制4. 自带 gap 设置安全间距不会重叠、没有缝隙bug5. 响应式、换行适配极强移动端完美兼容其代码如下!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleFlex实现三列布局/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 idnavigator网页导航栏/div div idcontent div iddiv1左侧栏/div div iddiv2 p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p p1/p /div div iddiv3右侧栏/div /div div idfooter网页页脚/div /body /html效果图总结inline缝隙多易错位定位脱离文档流易乱版Flex自适应强、写法简单全能通用