CSS 两栏布局
目录
CSS两栏布局(左列定宽,右列自适应宽)
方法一:浮动+margin
方法二:定位+margin
方法三:浮动+BFC
方法四:Flex布局
方法五:able布局
CSS两栏布局(左列不定宽,右列自适应宽)
CSS两栏布局(左列定宽,右列自适应宽)

方法一:浮动+margin
<div class="container"><div class="left">定宽</div><div class="right">自适应</div>
</div><style>/* 不给高度不行,不给宽度可以自适应 */
.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;background-color:coral;margin-left: 200px;
}</style>
方法二:定位+margin
html不变
/* 不给高度不行,不给宽度可以自适应 */
.container {position: relative;height: 300px;
}
.left {position: absolute;left: 0;/* 定宽 */width: 200px;height: 100%;background-color:chartreuse;
}.right {/* 不设置宽度自适应 */height: 100%;/* 方法一:margin-left: 200px(只设置边距也可以实现) *//* 方法二:定位*/position:absolute;left: 200px;right: 0; /*不设置这个,宽度会缩在一起,不自适应展开*/background-color:coral;
}
方法三:浮动+BFC
.container {height: 300px;
}
.left {float: left;/* 定宽 */width: 200px;height: 100%;background-color: chartreuse;
}
.right {/* 不设置宽度自适应 */height: 100%;overflow: hidden; /*触发BFC条件*/background-color: coral;
}
原理:给正常元素添加BFC属性,正常元素就不会被遮挡,且环绕浮动元素排开。
以上
脱离文档流的方式(如浮动、定位),他们的大体思路都是: 先让左定宽元素脱离文档流,这样可以右列正常能够与左列脱离文档流的元素“站成一排”,此时左列元素还覆盖着右列元素,最后,我们只需要调整一下右列元素的外边距啊、定位啊什么的就可以完成
方法四:Flex布局
.container {display: flex;height: 300px;
}
.left {/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color: chartreuse;
}
.right {/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */flex: 1;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color:coral;
}
方法五:able布局
/* table布局:(display:table-cell后)子级容器默认是自动平分宽度沾满父级容器; */
.container {display: table;height: 300px;width: 100%;
}
.left {display: table-cell;/* 定宽 */width: 200px;/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/background-color: chartreuse;
}
.right {/*height: 100% 因为未脱离文档流,所以不用设置高度也行*/display: table-cell;background-color: coral;
}
table布局只需要给父元素添加display:table属性,以及给两个子元素添加 display: table-cell属性即可
CSS两栏布局(左列不定宽,右列自适应宽)
方法一:flex方法二:浮动+BFC
因为操作方式如上面演示一样,只是去掉左列宽度属性而已,因此就不一一赘述列举了。
操作方式:去掉左列宽度,左列的宽度根据内容进行自适应,从而实现“左列不定宽,右列自适应宽”的效果。
为什么只有这两种方式可以实现?
因为其他方式都是脱离文档流的方式(如:浮动、定位),内部元素无法撑开脱离文档流的盒子。
相关文章:
CSS 两栏布局
目录 CSS两栏布局(左列定宽,右列自适应宽) 方法一:浮动margin 方法二:定位margin 方法三:浮动BFC 方法四:Flex布局 方法五:able布局 CSS两栏布局(左列不定宽&#…...
RHCSA常用命令总结
RHCSA回顾 1.Linux学习环境的安装部署 VMware虚拟机rhel9.x 磁盘容量:20GB cpu:1颗2核心 内存:2G 网卡:NAT 新CD/DVD设置镜像源文件 取消显示器的3d支持 (1)安装RHEL9 (2)组件:带有GUI的服务器 (3)分区…...
【Spring Boot】详解restful api
目录 1.restful api 1.1.历史 1.2.内容 1.3.传参 2.Spring Boot中的Restful Api 1.restful api 1.1.历史 RESTful API(Representational State Transferful Application Programming Interface)是一种设计风格,用于构建基于网络的应用…...
LISTAGG 函数
# LISTAGG 函数 对于查询中的每个组,LISTAGG 聚合函数根据 ORDER BY 表达式对该组的行进行排序,然后将值串联成一个字符串。 ## 语法: sql LISTAGG( [DISTINCT] aggregate_expression [, delimiter ] ) [ WITHIN GROUP (ORDER BY order_list) ] …...
485modbus转profinet网关连三菱变频器modbus通讯配置案例
本案例介绍了如何通过485modbus转profinet网关连接威纶通与三菱变频器进行modbus通讯。485modbus转profinet网关提供了可靠的连接方式,使用户能够轻松地将不同类型的设备连接到同一网络中。通过使用这种网关,用户可以有效地管理和监控设备,从…...
1024节日
程序员节日...
【@EnableWebMvc的原理】
用途 启用SpringMvc 的 Java 配置类,代替 xml 格式的配置文件。 一、查看运用(注解 EnableWebMvc ,实现 WebMvcConfigurer ) Component("com.ibicd") EnableWebMvc public class AppConfig implements WebMvcConfigu…...
css3 2d转换transform详细解析与代码实例transform
CSS3 Transform是CSS3的一个模块,其目的是为了通过对元素的变形、旋转、缩放、平移等操作,能够更加丰富的展示页面效果。下面是CSS3 Transform的详细解析与代码实例: transform属性 transform属性用于对元素进行变形操作,其属性…...
点亮现代编程语言的男人——C语言/UNIX之父Dennis Ritchie
祝各位程序员们1024程序员节快乐🎉🎉🎉 图片来自网络,侵删 前言 在程序员中,有一位人物的不被人熟知,他的贡献甚至比他自身更要出名 C语言之父,UNIX之父——Dennis MacAlistair Ritchie 一…...
找不到msvcp100.dll解决教程
在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp100.dll丢失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题,本文将介绍四个修复msvcp100.dll丢失的方法,帮助读者快速恢复计算机的正常运…...
萃取和constexpr
最近重温了一下萃取发现其与constexpr有相似之处,记录如下。 一、引出萃取 STL的在中心思想是将容器和算法分开,再通过迭代器iterator这一迭代器来将两者粘合起来。 通过迭代器进行算法计算,需要涉及两个问题: 问题一.通常需要…...
决策树完成图片分类任务
数据集要求: 训练集 和 验证集 (要求分好) 图片放置规则 : 一个总文件夹 放类别名称的子文件夹 其中子文件夹 为存放同一类别图片 举个例子 分类动物 则 总文件夹名称为动物 子文件夹为 猫 狗 猪猪 。。。 其中猫的文件夹里面…...
Docker 容器全部停止命令
Docker是一个开源的容器化平台,它可以帮助开发者快速构建、部署和运行应用程序。在使用Docker时,我们通常会创建多个容器来运行不同的服务或应用。当我们需要停止所有的容器时,可以使用一些命令来实现。本文将介绍几种常见的停止所有Docker容…...
对GRUB和initramfs的小探究
竞赛时对操作系统启动过程产生了些疑问,于是问题导向地浅浅探究了下GRUB和initramfs相关机制,相关笔记先放在这里了。 内核启动流程 在传统的BIOS系统中,计算机具体的启动流程如下: 电源启动:当计算机的电源打开时&…...
springboo单机多线程高并发防止重复消费的redis方案
springboo单机多线程高并发防止重复消费的redis方案 仅提供方案与测试。 想法:第一次收到userCode时,检查是否在redis中有,如果有,就表明已经消费了,返回抢单失败;否则,就去消费,顺…...
Java架构师内功数据库
目录 1 导学2 数据库基本概念2.1 数据库系统2.2 三级模式-两级映像2.3 数据库设计2.4 数据模型2.4.1 E-R模型2.4.2 关系模型2.5 关系代数3 规范化和并发控制3.1 函数依赖3.2 键与约束3.3 范式3.3.1 第一范式1NF3.3.2 第二范式3.3.3 第三范式3.4 模式分解3.5 并发控制3.6 封锁协…...
踩着节日的小尾巴
节日快乐...
UG\NX二次开发 设置视图中心 UF_VIEW_set_center
文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 感谢粉丝订阅 感谢 a1794902437 订阅本专栏,非常感谢。 简介 UG\NX二次开发 设置视图中心 UF_VIEW_set_center。如果视图NULL_TAG,则使用工作视图。 效果 代码 #include &qu…...
leetcode做题笔记201. 数字范围按位与
给你两个整数 left 和 right ,表示区间 [left, right] ,返回此区间内所有数字 按位与 的结果(包含 left 、right 端点)。 示例 1: 输入:left 5, right 7 输出:4示例 2: 输入&…...
游戏盾如何有效防护DDoS
从进入计算机时代以来,DDoS攻击一直是网络世界中的一大威胁,让无数服务陷入瘫痪。这种攻击的原理非常简单:攻击者使用大量的僵尸主机或蠕虫病毒,向目标服务器发送海量请求,迅速耗尽服务器的资源,使其无法继…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
若依项目部署--传统架构--未完待续
若依项目介绍 项目源码获取 #Git工具下载 dnf -y install git #若依项目获取 git clone https://gitee.com/y_project/RuoYi-Vue.git项目背景 随着企业信息化需求的增加,传统开发模式存在效率低,重复劳动多等问题。若依项目通过整合主流技术框架&…...
