如何实现一个两栏布局，右侧自适应？三栏布局中间自适应？

🕗 发布于 2024-01-16 12:47 前端

要实现一个两栏布局，右侧自适应的效果，可以使用 CSS 的 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例：

HTML 结构：

htmlCopy Code<div class="container">
  <div class="left-column">左侧内容</div>
  <div class="right-column">右侧内容</div>
</div>

CSS 样式：

cssCopy Code.container {
  display: flex;
}

.left-column {
  flex: 0 0 auto; /* 左侧固定宽度 */
  width: 200px;
}

.right-column {
  flex: 1 1 auto; /* 右侧自适应 */
}

在上述代码中，通过将父容器设置为 display: flex，使其成为一个弹性容器。左侧列使用固定宽度（例如200px），右侧列使用 flex: 1 1 auto，这样右侧列会自动占据剩余的可用空间。

对于三栏布局中间自适应的情况，也可以使用 Flexbox 或 Grid 布局来实现。以下是使用 Flexbox 实现的示例：

HTML 结构：

htmlCopy Code<div class="container">
  <div class="left-column">左侧内容</div>
  <div class="middle-column">中间内容</div>
  <div class="right-column">右侧内容</div>
</div>

CSS 样式：

cssCopy Code.container {
  display: flex;
}

.left-column, .right-column {
  flex: 0 0 auto; /* 左右两侧固定宽度 */
  width: 200px;
}

.middle-column {
  flex: 1 1 auto; /* 中间自适应 */
}

原文地址：https://blog.csdn.net/m0_65346405/article/details/135621293

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：尺寸链校核软件是什么？DTAS3D产品功能及优势有哪些？
下一篇：idea 安装免费Ai工具 codeium

【第34章】Spring Cloud之SkyWalking分布式日志
前面已经完成了请求的链路追踪，这里我们通过SkyWalking来处理分布式日志；场景描述：我们有三个服务消费者，提供者和用户服务，三个服务都有自己的日志文件，但是我一个请求会贯穿三个服务，不能说我一个
阅读更多2024-09-21
C++模板初阶
在之前的代码实现当中当我们要让一个函数能处理不同类型的数据时就只能使用函数重载，并且在此数据的类型还必须是我们重载的函数内拥有的，否则就无法实现。在之前实现顺序表、链表等数据结构时我们使用的是type
阅读更多2024-09-21
探索IT世界：从技术基础到职业发展
信息技术（IT）已经深深融入我们的日常生活，成为全球各行各业的核心力量。无论是智能手机应用、网络服务，还是企业的大型系统，IT技术无处不在。如果你是初学者，想要了解IT行业的广度和深度，那么这篇文章将
阅读更多2024-09-21
SQL 语法学习：深入了解与大数据处理的桥梁
SQL 是用于管理和操作关系型数据库的标准语言。它主要用于查询、插入、更新、删除数据库中的数据，并管理数据库的表结构等。SQL 最初由IBM公司开发，之后逐渐演变成了各大数据库管理系统（如MySQL、
阅读更多2024-09-21
Vue 项目中引入 Axios 详解
在 Vue 项目中，`axios` 是一个非常流行的 HTTP 客户端，用于向服务器发送请求并处理响应。本文将详细说明如何在 Vue 项目中引入 Axios 插件，以及如何进行基本的配置，包括构建、配
阅读更多2024-09-21
go 实现操作mysql并且防止sql注入
在最近使用go语言的同学，大家有没有操作数据库的时候遇到过sql注入的问题，sql注入会把数据库搞崩，或者是把数据库的数据全部查出造成不必要的随时,今天小程同学就给大家带来一个go中防sql注入的最好
阅读更多2024-09-21
Python学习
1.计算机的作用是计算，编程的目的为了更方便的计算，计算的对象是数据2.变量是程序在运行过程中临时用于储存数据的东西。
阅读更多2024-09-21
【RabbitMQ】应用
P: ⽣产者, 也就是要发送消息的程序C: 消费者,消息的接收者Queue: 消息队列, 图中⻩⾊背景部分. 类似⼀个邮箱, 可以缓存消息;
阅读更多2024-09-21
鹏哥C语言39---分支/循环语句练习：猜数字游戏
/---------------------------------------------------------------------------------------------------
阅读更多2024-09-21
自然语言处理-基于注意力机制的文本匹配
任务三：基于注意力机制的文本匹配输入两个句子判断，判断它们之间的关系。参考（可以只用LSTM，忽略Tree-LSTM），用双向的注意力机制实现。参考》第7章实现要求：Pytorch知识点：注意力机制
阅读更多2024-09-21

如何实现一个两栏布局，右侧自适应？三栏布局中间自适应？

相关文章