欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

CSS布局技术——三列布局样式

2026-06-03 分类：服务器技术 阅读(22) 评论(0)

三列布局样式：

三列布局是很常见的基础布局方式，一般网页结构分为左侧侧边栏、中间内容区域、右侧侧边栏。

方法：

1.通过inline-block实现

通过设置display: 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 {
/*
重要说明：
正常三列总和应为 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>

示例效果：

注意：

  • inline-block元素间会因HTML中的换行或空格产生默认间隙
  • 确保总宽度不超过100%，需计算精确的百分比和间距。
  • 使用vertical-align: top避免因内容高度不同导致的错位。

    • 2.通过position实现

    通过 position: absolute 固定左右列位置，中间列用边距留出空间。

    将元素脱离文档流，配合 left、right 等属性实现三列布局。

    示例代码：

    <!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>

    示例效果：

    注意：

    绝对定位可能脱离文档流，需根据场景谨慎使用。

    3.通过flex实现

    通过 display: flex 实现灵活的三列布局，中间列自动填充剩余空间。

    示例代码:

    <!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>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    <p>11</p>
    </div>
    <div id="div3">右侧栏</div>
    </div>
    <div id="footer">网页页脚</div>
    </body>
    </html>

    示例效果：

    注意：

    • 弹性盒子与网格布局需考虑浏览器兼容性，必要时添加前缀。

    • 确保父容器（.container）有明确的宽度或占满父级空间。

    • gap 属性用于设置列间距，需注意浏览器兼容性（IE不支持）。

    • 若需要固定宽度列，可结合 flex: none 和 width 属性实现。

    练习：

    示例代码：

    <!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;
    }

    #top {
    width: 100%;
    height: 150px;
    text-align: center;
    line-height: 40px;
    background: url(./web文件/网页经典布局/img_src/top.jpg) no-repeat center;
    background-size: 100% 100%;
    position: relative;
    }

    #logo{
    width: 550px;
    height: 110px;
    position: absolute;
    top: 25px;
    left: 130px;
    background: url(./web文件/网页经典布局/img_src/logo.png) no-repeat;
    background-size: 100% 100%;
    }

    #logo2{
    width: 300px;
    height: 75px;
    position: absolute;
    top: 35px;
    left: 700px;
    background:url(./web文件/网页经典布局/img_src/logo2.png) ;
    background-size: 100% 100%;
    }

    .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:green;
    padding: 10px 20px;
    align-content: flex-start;
    flex-wrap: wrap;
    }

    .nav-links {
    display: flex;
    gap: 25px;
    }

    nav {
    background-color: #39b54a;
    margin-top: 1px;
    padding: 8px 0;
    }
    nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    gap: 100px;
    padding-left: 180px;
    }

    #div2 {
    background-color: green;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    }

    .img {
    background: #fff;
    text-align: center;

    }

    footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ccc;
    font-size: 12px;
    }

    </style>
    </head>

    <body>
    <div id="top"></div>
    <div id="logo"></div>
    <div id="logo2"></div>
    <nav class="navbar">
    <ul>
    <li>首页</li>
    <li>学校概况</li>
    <li>机构设置</li>
    <li>院系专业</li>
    <li>教学科研</li>
    <li>信息公开</li>
    <li>招生就业</li>
    </ul>
    </nav>

    </div>
    <div id="content">
    <div class="div2">
    <div class="img"><img src="./web文件/网页经典布局/img_src/content.jpg" alt="" width="1000px" height="500px"></div>
    </div>
    </div>
    <div id="footer"></div>
    <footer>
    版权所有 © 2024 广东云浮中医药职业学院计算机学院
    </footer>

    </body>
    </html>

    页面效果如下：

    以上就是今天所有的内容啦，我们下次见！！！

    赞(0)
    未经允许不得转载：171主机测评 » CSS布局技术——三列布局样式
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(57950)#python(19723)#开发语言(16594)#java(15237)#运维(15168)#linux(14793)#大数据(14355)#服务器(12918)#算法(11627)#前端(10694)#网络(9225)#数据库(8765)#ai(8668)#c++(8065)#课程设计(6760)#学习(6651)#机器学习(6614)#区块链(5849)#OpenClaw(5378)#后端(5069)#spring boot(4960)#深度学习(4851)#c语言(4326)#毕业设计(4277)#数据结构(4155)#安全(3962)#docker(3898)#架构(3771)#javascript(3763)#大模型(3599)

    热门文章

    最新文章

    归档

    分类