当前位置： 首页 > news >正文

如何使用CSS实现一个自适应两栏布局，其中一栏固定宽度，另一栏自适应宽度？

news 2025/9/16 18:26:26

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 使用Float属性
  • ⭐ 使用Flexbox布局
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

要实现一个自适应两栏布局，其中一栏具有固定宽度，另一栏自适应宽度，可以使用CSS的float属性或flexbox布局。以下是两种方法的示例：

⭐ 使用Float属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {width: 100%;overflow: hidden; /* 清除浮动 */}.fixed-column {width: 200px; /* 固定宽度 */float: left;background-color: lightblue;}.fluid-column {margin-left: 210px; /* 留出固定宽度的空间 */background-color: lightgray;}</style>
</head>
<body><div class="container"><div class="fixed-column"><!-- 固定宽度的内容 --><p>固定宽度</p></div><div class="fluid-column"><!-- 自适应宽度的内容 --><p>自适应宽度</p></div></div>
</body>
</html>

在上述示例中，我们创建了一个包含两个子元素的容器.container。.fixed-column具有固定宽度（200px），而.fluid-column的宽度会根据可用空间自适应。

⭐ 使用Flexbox布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {display: flex;}.fixed-column {width: 200px; /* 固定宽度 */background-color: lightblue;}.fluid-column {flex-grow: 1; /* 自适应宽度 */background-color: lightgray;}</style>
</head>
<body><div class="container"><div class="fixed-column"><!-- 固定宽度的内容 --><p>固定宽度</p></div><div class="fluid-column"><!-- 自适应宽度的内容 --><p>自适应宽度</p></div></div>
</body>
</html>

在这个示例中，我们使用Flexbox布局，.container设置为display: flex;，.fixed-column具有固定宽度，而.fluid-column使用flex-grow: 1;属性来自适应剩余的可用空间。

无论您选择使用float还是flexbox，都可以实现一个具有固定宽度和自适应宽度的两栏布局，具体取决于您的项目需求和布局偏好。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个自适应两栏布局，其中一栏固定宽度，另一栏自适应宽度？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用Float属性⭐ 使用Flexbox布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感…...

编程日记 2023/8/29 1:59:57

【PostgreSQL】导出数据库表(或序列)的结构和数据

导出 PostgreSQL 数据库的结构和数据 要导出 PostgreSQL 数据库的结构和数据&#xff0c;你可以使用 pg_dump 命令行工具。pg_dump 可以生成一个 SQL 脚本文件&#xff0c;其中包含了数据库的结构&#xff08;表、索引、视图等&#xff09;以及数据。下面是如何使用 pg_dump 导…...

编程日记 2023/8/29 1:58:53

Arcgis colorRmap

arcgis中colorRmap对应的名称&#xff1a; 信息来源&#xff1a;https://developers.arcgis.com/documentation/common-data-types/raster-function-objects.htm 在arcpy中使用方法&#xff1a; import arcpy cr arcpy.mp.ColorRamp("Yellow to Red")python中 ma…...

编程日记 2023/8/29 1:57:49

[JDK8环境下的HashMap类应用及源码分析] capacity实验

🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄、CSDN博客专家 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 系列文章目录 [Java基础] StringBuffer 和 StringBuilder 类应用及源码分析 [Java基础] 数组应用…...

编程日记 2023/8/29 1:56:48

【自动驾驶】TI SK-TDA4VM 开发板上电调试，AI Demo运行

1. 设备清单 TDA4VM Edge AI 入门套件【略】USB 摄像头（任何符合 V4L2 标准的 1MP/2MP 摄像头，例如：罗技 C270/C920/C922）全高清 eDP/HDMI 显示屏最低 16GB 高性能 SD 卡连接到互联网的 100Base-T 以太网电缆【略】UART电缆外部电源或电源附件要求： 标称输出电压：5-20VDC…...

编程日记 2023/8/29 1:55:46

基于LOF算法的异常值检测

目录 LOF算法简介Sklearn官网LOF算法应用实例1Sklearn官网LOF算法应用实例2基于LOF算法鸢尾花数据集异常值检测读取数据构造数据可视化&#xff0c;画出可疑异常点LOF算法 LOF算法简介 LOF异常检测算法是一种基于密度的异常检测算法&#xff0c;基于密度的异常检测算法主要思想…...

编程日记 2023/8/29 1:54:45

软考-系统可靠性原理

系统可靠性原理...

编程日记 2023/8/29 1:53:43

【Unity】【Amplify Shader Editor】ASE入门系列教程第二课 硬边溶解

黑色为0,白色为1 新建材质&#xff08;不受光照影响&#xff09; 拖入图片 设置 添加节点&#xff1a; 快捷键&#xff1a;K 组合通道&#xff1a;快捷键 V 完成图...

编程日记 2023/8/29 1:52:41

对神经网络理解的个人记录

对神经网络理解的个人记录 一、 神经网络为什么可以拟合函数、非线性函数二、 用向量表示特征(语音、文本、视频)。然后如何计算向量之间的相似度2.1 欧氏距离的计算2.2 点积运算2.3 余弦相似度计算一、 神经网络为什么可以拟合函数、非线性函数 第一个小短片：讲解神经网络为什…...

编程日记 2023/8/29 1:51:40

华为数通方向HCIP-DataCom H12-821题库(单选题：61-80）

第61题 关于 BGP 的Keepalive报文消息的描述,错误的是 A、Keepalive周期性的在两个BGP邻居之间发送 B、Keepalive报文主要用于对等路由器间的运行状态和链路的可用性确认 C、Keepalive 报文只包含一个BGP数据报头 D、缺省情况下,Keepalive 的时间间隔是180s 答案&#xff…...

编程日记 2023/8/29 1:50:39

Unity带有时效性的数据存储

Unity带有时效性的数据存储 引言 在Unity项目开发中&#xff0c;有时候会遇到带有时效性的数据存储&#xff0c;比如账号信息、token等&#xff0c;都是具有时效性的&#xff0c;这时候我们就需要在这些信息过期的时候将对应的信息作废。 实现 这个功能怎么实现呢&#xff…...

编程日记 2023/8/29 1:49:37

vue 子组件 emit传递事件和事件数据给父组件

1 子组件通过emit 函数 传递事件名init-complete 和 数据dateRange this.$emit(init-complete, dateRange) 2 父组件 创建方法 接收数据 handleInitComplete(dateRange) {} 3 父组件 创建的方法 和 子组件事件绑定 <component :is"currentComponent" :passOb…...

编程日记 2023/8/29 1:48:35

Zenity 简介

什么使 Zenity Zenity 是一个开源的命令行工具&#xff0c;它提供了一种简单的方式来创建图形化的用户界面&#xff08;GUI&#xff09;对话框&#xff0c;以与用户进行交互。它基于 GTK 库&#xff0c;可以在 Linux 和其他 UNIX-like 系统上使用。 Zenity 可以通过命令行或脚…...

编程日记 2023/8/29 1:47:33

c# 数组反转

一个数组是{1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;6}&#xff0c;把它变成{6&#xff0c;5&#xff0c;4&#xff0c;3&#xff0c;2&#xff0c;1} 1.创建一个和原数组长度类型一样的数组来接收反转的数据 private static void Main(string[] a…...

编程日记 2023/8/29 1:46:31

CSS学习笔记01

CSS笔记01 什么是CSS CSS&#xff08;Cascading Style Sheets &#xff09;&#xff1a;层叠样式表&#xff0c;也可以叫做级联样式表&#xff0c;是一种用来表现 HTML 或 XML 等文件样式的计算机语言。字体&#xff0c;颜色&#xff0c;边距&#xff0c;高度&#xff0c;宽度…...

编程日记 2023/8/29 1:45:29

数据结构，队列，顺序表队列，链表队列

队列是一种常见的数据结构&#xff0c;它具有先进先出&#xff08;First-In-First-Out&#xff0c;FIFO&#xff09;的特性&#xff0c;类似于排队等候的场景。以下是队列的要点&#xff1a; 1. 定义&#xff1a;队列是一种线性数据结构&#xff0c;由一系列元素组成&#xff…...

编程日记 2023/8/29 1:44:28

Webgl利用缓冲区绘制三角形

什么是attribute 变量 它是一种存储限定符&#xff0c;表示定义一个attribute的全局变量&#xff0c;这种变量的数据将由外部向顶点着色器内传输&#xff0c;并保存顶点相关的数据&#xff0c;只有顶点着色器才能使用它 <!DOCTYPE html> <html lang"en"&g…...

编程日记 2023/8/29 1:43:27

正则表达式应用

正则表达式应用 正则匹配以{开头&#xff0c;以}结尾 \{.*?\}正则匹配以[开头&#xff0c;以]结尾 \[.*?\]校验数字的表达式 数字&#xff1a;^[0-9]*$n位的数字&#xff1a;^\d{n}$至少n位的数字&#xff1a;^\d{n,}$m-n位的数字&#xff1a;^\d{m,n}$零和非零开头的数字…...

编程日记 2023/8/29 1:42:26

9.4 【C语言】用指针处理链表

9.4.1 什么是链表 它是动态地进行存储分配的一种结构。 链表中各元素在内存中的地址是不连续的。要找某一元素&#xff0c;必须先找到上一个元素&#xff0c;根据它提供的下一元素地址才能找到下一个元素。 如果不提供“头指针”&#xff0c;则整个链表无法访问。 9.4.2 建…...

编程日记 2023/8/29 1:41:25

后端面试话术集锦第四篇：rabbitmq面试话术

🚗后端面试集锦目录 💖后端面试话术集锦第一篇：spring面试话术💖 💖后端面试话术集锦第二篇：spring boot面试话术💖 💖后端面试话术集锦第三篇：spring cloud面试话术💖 💖后端面试话术集锦第四篇：ElasticSearch面试话术💖 💖后端面试话术集锦第五篇：r…...

编程日记 2023/8/29 1:40:24

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/9/6 15:40:21

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/9/10 3:41:08

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/9/13 8:52:42

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/8/12 1:19:44

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/9/14 0:25:25

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2025/9/3 22:35:50

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/9/2 19:29:30

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

编程新知 2025/9/12 3:11:17

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

编程新知 2025/9/9 15:00:22