前端经典三列布局：3种实现方法详解（附代码+优缺点）

llnanana

238人浏览 · 2026-06-02 23:02:05

llnanana · 2026-06-02 23:02:05 发布

三列布局是前端网页开发中最基础、最常用的布局方式，广泛应用于官网、博客、后台管理系统等场景。标准的三列布局核心要求为：左右侧边栏宽度固定，中间内容区自适应填充剩余空间，页面整体稳定无错位、塌陷。

本文将详解三种主流三列布局实现方案：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布局，特殊兼容场景可酌情使用另外两种方案。

脑启社区

脑启社区是一个专注类脑智能领域的开发者社区。欢迎加入社区，共建类脑智能生态。社区为开发者提供了丰富的开源类脑工具软件、类脑算法模型及数据集、类脑知识库、类脑技术培训课程以及类脑应用案例等资源。

更多推荐

面向逻辑思维的程序设计方法——类脑大模型小脑视觉预处理设计

生物小脑视觉对工程设计的启发总结[8-10,13]：分层处理（小脑皮层统一微电路——工程模块化）；预测-校正（前向模型——工程双层预测）；多源融合（前庭+视觉——工程IMU+相机）；学习适应（VOR增益学习——工程在线标定）[8-10,13]。四条启发的工程化即本文的架构骨架[8-10,13]。小脑视觉预处理的总结[13-16]：它是类脑大模型"快慢双视觉"的执行侧视觉通道——双目构建空间结构、前