CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)
目录
一、左边定宽 右边自适应
1.浮动
2.利用浮动+margin
3.定位+margin
4.flex布局
5.table 布局
二、左右成比自适应
1:1
1flex布局
table布局
1:2
flex布局
<div class="father"><div class="left">左边自适应</div><div class="right">右边自适应</div></div>
一、左边定宽 右边自适应
![]()
1.浮动
.left {width: 100px;background-color: rebeccapurple;float: left;
}
.right {width: calc(100%-100px);background-color: green;
}
2.利用浮动+margin
.left {width: 100px;background-color: rebeccapurple;float: left;
}.right {background-color: green;margin-left: 100px;
}
3.定位+margin
.father {position: relative;
}.left {position: absolute;width: 100px;left: 0;background-color: rebeccapurple;
}.right {background-color: green;margin-left: 100px;
}
4.flex布局
.father {display: flex;
}.left {width: 100px;background-color: rebeccapurple;
}.right {flex: 1;/* flex: 1可以让其填充剩余的空间,以达到拉伸的效果 */background-color: green;
}
5.table 布局
.father {width: 100%;display: table;
}.left {display: table-cell;width:300px;background-color: rebeccapurple;
}.right {display: table-cell;background-color: green;
}
二、左右成比自适应
1:1

1flex布局
.father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;}
.right {width: 200px;height: 200px;background-color: green;flex: 1;/* 放大且缩小并等分所有空间 *//* flex:1等于flex-grow: 1、flex-shrink: 1、flex-basic: 0% */
}
table布局
.father {width: 100%;display: table;
}.left {display: table-cell;height: 200px;background-color: rebeccapurple;
}.right {display: table-cell;height: 200px;background-color: green;
}
1:2

flex布局
.father {display: flex;
}
.left {width: 200px;height: 200px;background-color: rebeccapurple;flex: 1;
}
.right {width: 200px;height: 200px;background-color: green;flex: 2;/* flex:1等于flex-grow: 2、flex-shrink: 2、flex-basic: 0% */} 等分所有空间,宽度比左:右=1:2
flex 布局的默认主轴方向为 row ,所以 flex-basis 属性 默认是控制元素的 width
相关文章:
CSS | CSS实现两栏布局(左边定宽 右边自适应,左右成比自适应)
目录 一、左边定宽 右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局 二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 <div class"father"><div class"left">左边自适应</div><div class"r…...
acwing_3195_有趣的数
acwing_3195_有趣的数 // // Created by HUAWEI on 2024/11/17. // #include<iostream> #include<cstring> #include<algorithm>#define int long longusing namespace std;const int N 1000 50; const int MOD 1e9 7; int C[N][N]; //组合数signed mai…...
Liunx-搭建安装VSOMEIP环境教程 执行 运行VSOMEIP示例demo
本文安装环境为Liunx,搭建安装VSOMEIP环境并运行基础例子。 1. 安装基础环境 使用apt-get来安装基础环境,受网络影响可以分开多次安装。环境好的也可以一次性执行。 sudo apt-get install gcc g sudo apt-get install cmake sudo apt-get install lib…...
Git | git revert命令详解
关注:CodingTechWork 引言 Git 是一个强大的版本控制工具,广泛应用于现代软件开发中。它为开发人员提供了多种功能来管理代码、协作开发和版本控制。在 Git 中,有时我们需要撤销或回退某些提交,而git revert 是一个非常有用的命令…...
ASP.NET Core 中,Cookie 认证在集群环境下的应用
在 ASP.NET Core 中,Cookie 认证在集群环境下的应用通常会遇到一些挑战。主要的问题是 Cookie 存储在客户端的浏览器中,而认证信息(比如 Session 或身份令牌)通常是保存在 Cookie 中,多个应用实例需要共享这些 Cookie …...
Flyte工作流平台调研(五)——扩展集成
系列文章: Flyte工作流平台调研(一)——整体架构 Flyte工作流平台调研(二)——核心概念说明 Flyte工作流平台调研(三)——核心组件原理 Flyte工作流平台调研(四)——…...
【AUTOSAR 基础软件】软件组件的建立与使用(“代理”SWC)
基础软件往往需要建立一些“代理”SWC来完成一些驱动的抽象工作(Complex_Device_Driver_Sw或者Ecu_Abstraction_Sw等),或建立Application Sw Component来补齐基础软件需要提供的功能实现。当面对具体的项目时,基础软件开发人员还可…...
java通过ocr实现识别pdf中的文字
需求:识别pdf文件中的中文 根据github项目mymonstercat 改造,先将pdf文件转为png文件存于临时文件夹,然后通过RapidOcr转为文字,最后删除临时文件夹 1、引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId&g…...
Git 命令代码管理详解
一、Git 初相识:版本控制的神器 在当今的软件开发领域,版本控制如同基石般重要,而 Git 无疑是其中最耀眼的明珠。它由 Linus Torvalds 在 2005 年创造,最初是为了更好地管理 Linux 内核源代码。随着时间的推移,Git 凭借…...
Docker的安装和使用
容器技术 容器与虚拟机的区别 虚拟机 (VM) VM包含完整的操作系统,并在虚拟化层之上运行多个操作系统实例。 VM需要更多的系统资源(CPU、内存、存储)来管理这些操作系统实例。 容器 (Container) 容器共享主机操作系统的内核,具…...
Flink系统知识讲解之:Flink内存管理详解
Flink系统知识讲解之:Flink内存管理详解 在现阶段,大部分开源的大数据计算引擎都是用Java或者是基于JVM的编程语言实现的,如Apache Hadoop、Apache Spark、Apache Drill、Apache Flink等。Java语言的好处是不用考虑底层,降低了程…...
使用JMeter模拟多IP发送请求!
你是否曾遇到过这样的场景:使用 JMeter 进行压力测试时,单一 IP 被服务器限流或者屏蔽?这时,如何让 JMeter 模拟多个 IP 发送请求,成功突破测试限制,成为测试工程师必须攻克的难题。今天,我们就…...
【Ubuntu与Linux操作系统:六、软件包管理】
第6章 软件包管理 6.1 Linux软件安装基础 Linux的软件包是以二进制或源码形式发布的程序集合,包含程序文件和元数据。软件包管理器是Linux系统的重要工具,用于安装、更新和卸载软件。 1. 常见的软件包管理器: DEB 系统(如Ubunt…...
【数据结构-堆】力扣1834. 单线程 CPU
给你一个二维数组 tasks ,用于表示 n 项从 0 到 n - 1 编号的任务。其中 tasks[i] [enqueueTimei, processingTimei] 意味着第 i 项任务将会于 enqueueTimei 时进入任务队列,需要 processingTimei 的时长完成执行。 现…...
【前端动效】原生js实现拖拽排课效果
目录 1. 效果展示 2. 效果分析 2.1 关键点 2.2 实现方法 3. 代码实现 3.1 html部分 3.2 css部分 3.3 js部分 3.4 完整代码 4. 总结 1. 效果展示 如图所示,页面左侧有一个包含不同课程(如语文、数学等)的列表,页面右侧…...
C#使用OpenTK绘制3D可拖动旋转图形三棱锥
接上篇,绘制着色矩形 C#使用OpenTK绘制一个着色矩形-CSDN博客 上一篇安装OpenTK.GLControl后,这里可以直接拖动控件GLControl 我们会发现GLControl继承于UserControl //// 摘要:// OpenGL-aware WinForms control. The WinForms designer will always call the default//…...
排序的本质、数据类型及算法选择
排序的本质、数据类型及算法选择 一、排序的本质二、排序的数据类型三、排序算法的选择依据 前两天老金写了篇 “十大排序简介”,有点意犹未尽,这一回老金想把排序连根拔起,从排序的本质说道说道。 一、排序的本质 从字面上理解,…...
Python的列表基础知识点(超详细流程)
目录 一、环境搭建 二、列表 2.1 详情 2.2 列表定义 2.3 列表长度 2.4 列表索引 2.5 切片索引 2.6 添加 2.7 插入 2.8 剔除 2.8.1 pop方法 2.8.2 del方法 2.9 任何数据类型 2.10 拼接 2.10.1 “” 2.10.2 “*” 2.11 逆序 编辑 2.12 计算出现次数 2.13 排序…...
HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现
HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现 最近在学习鸿蒙开发过程中,阅读了官方文档,在之前做flutter时候,经常使用overlay,使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的t…...
【Ubuntu与Linux操作系统:一、Ubuntu安装与基本使用】
第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核,拥有高稳定性和强大的网络功能。由于其开源性和灵活性,Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版…...
[RAG在LangChain中的实现-07]利用重排序选择相关性最高的检索内容构建上下文
重排序(Re-ranking)是一种关键的RAG优化技术。它通过在“初始检索”与“最终生成”之间,通过对初步检索出的文档进行二次评估,筛选出与用户查询语义最相关的结果,从而提高生成内容的准确性。在典型的检索流程中&#x…...
马上深挖!!!三段逆置如何实现数组轮转?!用最简单的话让你秒懂
一、目的给定一个数组和一个整数k,让数组向右轮转k个数。如令[1,2,3,4,5,6]向右轮转3个数,结果为[4,5,6,1,2,3]。二、代码#include <iostream> using namespace std;void swap(int* a,int* b) {int tmp*a;*a*b;*btmp;return; }void reverse(int* a…...
你那点芯片技术,撑不过35岁
很多搞芯片的人,30岁左右会有一段很舒服的时光。RTL写得顺手,时序约束能搞定,综合流程跑起来没问题,偶尔能查出几个难定位的bug,感觉自己挺能打的。但大概从32、33岁开始,一些很微妙的事情发生了。项目变复…...
告别手动记录:清音听真语音识别系统快速部署,中英文混合转录一键搞定
告别手动记录:清音听真语音识别系统快速部署,中英文混合转录一键搞定 1. 系统概述与核心优势 清音听真语音识别系统搭载了Qwen3-ASR-1.7B旗舰引擎,是专为复杂语音场景设计的高精度转录解决方案。相比前代0.6B版本,1.7B参数模型在…...
CASS11.0再升级:新增实用功能与BUG修复全解析(2022.5.11版)
1. CASS11.0版本升级概览 作为测绘行业的老牌软件,CASS11.0这次更新又带来了不少惊喜。记得去年11月刚发布时,我就第一时间安装体验过,当时就被它的3D建模能力和土方计算优化惊艳到了。没想到短短半年时间,研发团队又连续推出了三…...
Android开发秘籍:给图片加上独特水印
Android开发秘籍:给图片加上独特水印 为什么要给图片加水印 在当今这个信息飞速传播的时代,图片作为一种直观且富有表现力的信息载体,在我们的生活和工作中无处不在。无论是在社交媒体上分享的精美摄影作品,还是电商平台上展示的…...
Windows 11 上安装 MinGW-w64 并运行 LVGL SDL 模拟器
目前最推荐的方式是使用 MSYS2。它安装简单、包管理方便(pacman),而且能直接安装 SDL2,避免手动复制头文件和库的麻烦。 以下是完整、推荐的步骤(2026 年最新实践): 1. 安装 MSYS2(…...
电散热器为何能适配多场景采暖?
一、设备概述:3kW 220V电散热器的核心定位3kW 220V电散热器是一款功率适中、电压适配家用及小型商用场景的便捷采暖设备,凭借无需复杂管道铺设、即开即热的优势,成为现代采暖的热门选择。其额定功率3kW、额定电压220V,适配家庭、办…...
2025最权威的十大AI学术神器推荐榜单
Ai论文网站排名(开题报告、文献综述、降aigc率、降重综合对比) TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 于人工智能生成内容也就是AIGC愈发普及的当前情形下,把它的机械痕迹以及同质化特…...
GLM-4.1V-9B-Base实战教程:跨境电商A+页面图像卖点自动提炼
GLM-4.1V-9B-Base实战教程:跨境电商A页面图像卖点自动提炼 1. 为什么需要自动提炼图像卖点 跨境电商卖家每天需要处理大量商品图片,传统人工标注方式存在三个痛点: 效率低下:一个运营人员每天最多处理50-100张图片成本高昂&…...
