Audacity音频编辑器：从零开始制作专业级音频作品的完整指南
2026/6/6 14:16:15
三列布局是前端网页开发中最基础、最常用的布局方式，广泛应用于官网、博客、后台管理系统等场景。标准的三列布局核心要求为：左右侧边栏宽度固定，中间内容区自适应填充剩余空间，页面整体稳定无错位、塌陷。
本文将详解三种主流三列布局实现方案：inline-block布局、position定位布局、flex弹性布局，统一HTML结构，方便对比学习，同时附上各方案优缺点与实战适配场景。
一、inline-block 布局
实现原理
将三列块级元素转换为行内块元素，利用行内元素可同行排列的特性，实现三列横向布局。
完整代码及演示
<!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 { 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>核心注意点
行内块元素会默认解析HTML代码中的换行、空格，产生空白间隙。原本 10%+80%+10% 的满分宽度会超出屏幕，导致右侧栏换行错位，因此需将中间区域宽度缩减至79.5%左右。
优缺点
优点：写法简单、逻辑清晰，兼容性极强，适配所有老旧浏览器
缺点：存在默认空白间距，需手动精准计算宽度，适配性差
二、position 定位布局
实现原理
给父容器设置相对定位作为定位基准，三列子元素设置绝对定位脱离文档流，通过left、right、top属性精准划分区域，实现三列并排。
完整代码及演示
<!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> </html>核心注意点
子元素全部脱离文档流，父容器无法被子元素撑开，因此必须手动设置父容器高度，否则会出现高度塌陷问题。
优缺点
优点：定位精准，元素位置固定，不会被其他元素挤压错位
缺点：存在高度塌陷风险，需手动固定宽高，自适应能力弱
三、Flex 弹性布局（推荐）
实现原理
给父容器开启display: flex，子元素自动横向排列，可自由设置固定宽度和自适应比例，代码简洁、布局稳定，是目前主流的布局方案。同时支持搭配媒体查询实现响应式适配。
1、基础固定三列布局
<!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%; } /* 中间内容栏 */ #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">中间内容</div> <div id="div3">右侧栏</div> </div> <div id="footer">网页页脚</div> </body> </html>Flex布局相较于前两种布局方案，更加简洁、灵活。只需为父容器添加一行display: flex样式，子元素便可自动横向排列，无需复杂的宽度计算与定位设置。同时该布局天然适配响应式开发，可结合媒体查询实现不同设备下的布局自适应切换，适配多终端展示需求。
2、进阶：响应式三列布局
搭配媒体查询，适配电脑、平板、手机不同设备屏幕，实现布局自动切换：
<!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; /* 允许自动换行，响应式必备 */ flex-wrap: wrap; } /* 左侧栏 */ #div1 { background-color: red; /* 电脑端宽度 */ width: 10%; } /* 中间内容栏 */ #div2 { background-color: green; /* 电脑端宽度 */ width: 80%; } /* 右侧栏 */ #div3 { background-color: blue; /* 电脑端宽度 */ width: 10%; } /* ==================== 响应式区间 ==================== */ /* 平板端：宽度≤768px，不改变顺序，左右自动并排 */ @media (max-width: 768px) { /* 左侧占一半宽度 */ #div1 { width: 50%; } /* 中间占满整行，自动换行 */ #div2 { width: 100%; } /* 右侧占一半宽度，自动跟上一行剩余位置 */ #div3 { width: 50%; } } /* 手机端：宽度≤480px，全部单列 */ @media (max-width: 480px) { #div1,#div2,#div3 { width: 100%; } } /* 页脚样式 */ #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">中间内容</div> <div id="div3">右侧栏</div> </div> <div id="footer">网页页脚</div> </body> </html>四、习题练习
代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } nav { background-color: #39b54a; margin-top: 80px; padding: 8px 0; } nav ul { list-style: none; display: flex; justify-content: flex-start; gap: 50px; padding-left: 180px; } nav ul li a { color: #fffcfc; text-decoration: none; font-size: 14px; } .top-header { width: 100%; height: 120px; background: url(./img_src/top.jpg) no-repeat center; background-size: 100% 100%; position: relative; } .left-logo { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); width: 400px; height: 70px; background: url(./img_src/logo.png) no-repeat; background-size: 100% 100%; } .right-box { position: absolute; top: 50%; left: 800px; transform: translateY(-50%); text-align: center; } .college-name { font-size: 20px; font-weight: bold; color: #000; margin-bottom: 5px; } .motto-img { width: 300px; height: 40px; display: inline-block; background: url(./img_src/logo2.png) no-repeat; background-size: 100% 100%; } .navbar { display: flex; align-items: center; justify-content: space-between; background-color:green; padding: 10px 20px; } .logo { color: #fff; font-size: 18px; font-weight: bold; } .nav-links { display: flex; gap: 25px; } .nav-links a { color: #fff; } .search-box { display: flex; gap: 5px; } .search-box input { padding: 5px; border: none; border-radius: 3px; } .search-box button { padding: 5px 10px; border: none; border-radius: 3px; background: #fff; color: green; cursor: pointer; } .main-wrap { display: flex; } .left-sidebar { width: 180px; background: green; min-height: 400px; color: #fff; padding: 15px; } .container { flex: 1; background: #eee; padding: 20px; min-height: 400px; } .right-sidebar { width: 180px; background:green; min-height: 400px; padding: 15px; } .img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; } .img-item { background: #fff; padding: 10px; text-align: center; } .img-item img { width: 100%; } .contact-form { background: #ffc8d0; padding: 10px; position: fixed; right: 15px; top: 500px; width: 160px; } .contact-form input { width: 100%; margin: 4px 0; padding: 3px; } .contact-form button { width: 100%; padding: 3px; } footer { text-align: center; padding: 10px; border-top: 1px solid #ccc; font-size: 12px; } </style> </head> <body> <div class="top-header"> <div class="left-logo"></div> <div class="right-box"> <div class="college-name">计算机学院</div> <div class="motto-img"></div> </div> </div> <nav class="navbar"> <ul> <li><a href="#">学校概况</a></li> <li><a href="#">学院新闻</a></li> <li><a href="#">机构设置</a></li> <li><a href="#">院系专业</a></li> <li><a href="#">教学科研</a></li> <li><a href="#">招生就业</a></li> <li><a href="#">学生成果</a></li> </ul> </nav> <div class="main-wrap"> <div class="left-sidebar">左侧栏目</div> <div class="container"> <h1>欢迎来到我们的网站</h1> <p>这里是一些关于我们的内容。</p > <div class="img-grid"> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> <div class="img-item"><img src="D:\测试前端\校徽.jpg" alt=""></div> </div> </div> <div class="right-sidebar"> <div class="contact-form"> <h4>联系我们</h4> <input type="text" placeholder="姓名"> <input type="text" placeholder="邮箱"> <button>提交</button> </div> </div> </div> <footer> 版权所有 © 2024 广东云浮中医药职业学院计算机学院 </footer> </body> </html>优缺点
优点：代码简洁、无塌陷错位问题、自适应能力强、支持响应式，适配现代所有浏览器
缺点：不兼容极低版本IE浏览器（现代项目无影响）
四、三种布局方案总结对比
布局方式 | 兼容性 | 自适应能力 | 优缺点核心总结 | 适用场景 |
|---|---|---|---|---|
inline-block | 极佳 | 差 | 简单易写，存在空白间距，需手动算宽 | 简单静态页面、老旧浏览器适配项目 |
position定位 | 良好 | 较差 | 定位精准，易高度塌陷，需固定高度 | 固定侧边栏、元素精准定位场景 |
Flex弹性布局 | 现代浏览器全覆盖 | 极强 | 代码简洁、布局稳定、支持响应式 | 所有现代前端项目（首选方案） |
五、总结
综上，三种三列布局各有特点：inline-block兼容性强但有间距问题，position定位定位精准易塌陷，Flex布局简洁灵活、自适应能力最优。现代前端开发优先选用Flex布局，特殊兼容场景可酌情使用另外两种方案。