如何用css实现三栏自适应布局-css教程-PHP中文网

如何用css实现三栏自适应布局

P粉602998670

发布： 2025-10-08 11:35:01

原创

194人浏览过

使用Flexbox：容器设display: flex，左右固定宽度，中间flex: 1自适应；2. 使用Grid：grid-template-columns设200px 1fr 200px实现三栏；3. 浮动法：左右浮动并设宽，中间用margin留白；4. 绝对定位：左右定位于容器边缘，中间通过margin避让。推荐优先使用Flexbox或Grid，代码简洁且易维护。

如何用css实现三栏自适应布局

实现三栏自适应布局，核心是让左右两栏固定宽度，中间一栏自动填充剩余空间。以下是几种常用且实用的CSS方法。

1. 使用 Flexbox 布局

Flexbox 是最推荐的方式，代码简洁，兼容性好，支持现代浏览器。

基本结构如下：

<div class="container">
  <div class="left">左栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右栏</div>
</div>

登录后复制

CSS 样式：

立即学习“前端免费学习笔记（深入）”；

.container {
  display: flex;
}
<p>.left, .right {
width: 200px; /<em> 固定宽度 </em>/
background-color: #eee;
}</p><p>.middle {
flex: 1; /<em> 自动占满剩余空间 </em>/
background-color: #ddd;
}</p>

登录后复制

说明：容器设为 display: flex，左右栏设定固定宽度，中间用 flex: 1 实现自适应。

2. 使用 CSS Grid 布局

Grid 更适合二维布局，但三栏也十分简单。

CSS 示例：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */
  gap: 10px;
}

登录后复制

说明：1fr 表示可用空间的一份，中间列会自动拉伸。这种方式更直观，适合现代项目。

3. 使用浮动 + margin（传统方式）

适用于需要兼容老浏览器的场景。

HTML 结构保持不变，CSS 如下：

.container {
  overflow: hidden; /* 触发BFC，防止高度塌陷 */
}
<p>.left {
float: left;
width: 200px;
background-color: #eee;
}</p><p>.right {
float: right;
width: 200px;
background-color: #eee;
}</p><p>.middle {
margin-left: 200px;
margin-right: 200px;
background-color: #ddd;
}</p>

登录后复制

说明：左右栏分别向两侧浮动，中间栏通过左右 margin 留出空间。注意父容器需清除浮动影响。

4. 使用绝对定位（不推荐，仅特殊场景）

如果布局脱离文档流，可考虑绝对定位。

.container {
  position: relative;
}
<p>.left {
position: absolute;
left: 0;
width: 200px;
background-color: #eee;
}</p><p>.right {
position: absolute;
right: 0;
width: 200px;
background-color: #eee;
}</p><p>.middle {
margin: 0 200px;
background-color: #ddd;
}</p>

登录后复制

说明：左右定位固定，中间用 margin 避开。但会影响布局灵活性，一般不推荐。

基本上就这些。现代开发建议优先使用 Flexbox 或 Grid，写法简单，维护方便，响应式也更容易处理。

以上就是如何用css实现三栏自适应布局的详细内容，更多请关注php中文网其它相关文章！