CSS中三栏布局的实现
三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现:
- 利用绝对定位,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。
.outer {position: relative;height: 100px;
}.left {position: absolute;width: 100px;height: 100px;background: tomato;
}.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold;
}.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen;
}
- 利用flex布局,左右两栏设置固定大小,中间一栏设置为flex:1。
.outer {display: flex;height: 100px;
}.left {width: 100px;background: tomato;
}.right {width: 100px;background: gold;
}.center {flex: 1;background: lightgreen;
}
- 利用浮动,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值,注意这种方式**,中间一栏必须放到最后:**
.outer {height: 100px;
}.left {float: left;width: 100px;height: 100px;background: tomato;
}.right {float: right;width: 200px;height: 100px;background: gold;
}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;
}
- 圣杯布局,利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。
.outer {height: 100px;padding-left: 100px;padding-right: 200px;
}.left {position: relative;left: -100px;float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;
}.right {position: relative;left: 200px;float: right;margin-left: -200px;width: 200px;height: 100px;background: gold;
}.center {float: left;width: 100%;height: 100px;background: lightgreen;
}
- 双飞翼布局,双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。本质上来说,也是通过浮动和外边距负值来实现的。
.outer {height: 100px;
}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;
}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;
}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;
}.center {margin-left: 100px;margin-right: 200px;height: 100px;
}
相关文章:
CSS中三栏布局的实现
三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现: 利用绝对定位,左右两栏设置为绝对定位,中间设置对应方向大小的margin的值。 .outer {position: relative;h…...
Linux搭建我的世界(MC)整合包服务器,All the Mods 9(ATM9)整合包开服教程
Linux使用MCSM面板搭建我的世界(Minecraft)整合包服务器,MC开服教程,All the Mods 9(ATM9)整合包搭建服务器的教程。 本教程使用Docker来运行mc服,可以方便切换不同Java版本,方便安装多个mc服版本。 视频教程:https:…...
让数据在业务间高效流转,镜舟科技与NineData完成产品兼容互认
近日,镜舟科技与NineData完成产品兼容测试。在经过联合测试后,镜舟科技旗下产品与NineData云原生智能数据管理平台完全兼容,整体运行高效稳定。 镜舟科技致力于帮助中国企业构建卓越的数据分析系统,打造独具竞争力的“数据护城河”…...
2.1HTML5基本结构
HTML5实际上不算是一种编程语言,而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成,这些标签以<元素名>的形式出现,用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上,而元…...
设置浏览器显示小于12px以下字体
问题 我们在项目开发过程中有时候会遇到设计师给的小于12px的字体,IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的,但是谷歌浏览器上显示字体最小为12px,css设置font-size:10px,运行代码显示结果仍然…...
web蓝桥杯真题:成语学习
代码: //TODO 点击文字后,在idiom从左到右第一个空的位置加上改文字 getSingleWord(val) {let index this.idiom.indexOf() //从左往右查询空字符串this.$set(this.idiom, index, val) //响应式更新 },// TODO 校验成语是否输入正确答案 confirm…...
外包干了5天,技术明显退步。。。。。
先说一下自己的情况,本科生,19年通过校招进入南京某软件公司,干了接近2年的功能测试,今年年初,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…...
Vue:自定义消息通知组件
一、效果描述 在JS中使用一个Message函数,弹出一个自定义的消息框。 效果体验:缓若江海凝清光 二、实现方式 1.新建一个消息组件 2.新建一个js文件,新建一个需要导出函数 3.在函数中新建一个Vue实例,并将消息组件挂载上去。…...
2023 收入最高的十大编程语言
本期共享的是 —— 地球上目前已知超过 200 种可用的编程语言,了解哪些语言在 2023 为开发者提供更高的薪水至关重要。 过去一年里,我分析了来自地球各地超过 1000 万个开发职位空缺,辅助我们了解市场,以及人气最高和收入最高的语…...
Github 2024-03-11 开源项目周报 Top15
根据Github Trendings的统计,本周(2024-03-11统计)共有15个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4TypeScript项目3Jupyter Notebook项目3C#项目1HTML项目1CSS项目1Dart项目1Lua项目1Shell项目1Rust…...
【DAY10 软考中级备考笔记】数据结构 图
数据结构 图 3月11日 – 天气:晴 晚上无线网络突然不能用了,花费好久弄这个,耽误了一些时间 1. 图的定义 这里需要注意完全图的定义,以及完全图的边数 这里需要注意连通图和连通分量的概念。 2. 图的存储结构 图有两种存储结构&a…...
java-ssm-jsp基于java的餐厅点餐系统的设计与实现
java-ssm-jsp基于java的餐厅点餐系统的设计与实现 获取源码——》公主号:计算机专业毕设大全...
蓝桥杯(1):python排序
1 基础 1.1 输出 1.1.1 去掉输出的空格 print("Hello","World",123,sep"") print("hello",world,123,sep) print(hello,world,123) #输出结果 #HelloWorld123 #helloworld123 #hello world 123 1.1.2 以不同的方式结尾 print(&quo…...
SpringMVC请求、响应和拦截器的使用
SpringMVC请求 RequestMapping注解 RequestMapping注解的作用是建立请求URL和处理方法之间的对应关系 RequestMapping注解可以作用在方法和类上 1. 作用在类上:第一级的访问目录 2. 作用在方法上:第二级的访问目录 3. 细节:路径可以不编写…...
基于springboot+layui仓库管理系统设计和实现
基于 java springbootlayui仓库管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…...
【开源-土拨鼠充电系统】鸿蒙 HarmonyOS 4.0+微信小程序+云平台
本人自己开发的开源项目:土拨鼠充电系统 ✍GitHub开源项目地址👉:https://github.com/cheinlu/groundhog-charging-system ✍Gitee开源项目地址👉:https://gitee.com/cheinlu/groundhog-charging-system ✨踩坑不易&am…...
[抽象]工厂模式([Abstract] Factory)——创建型模式
[抽象]工厂模式——创建型模式 什么是抽象工厂? 抽象工厂模式是一种创建型设计模式,让你能够保证在客户端程序中创建一系列有依赖的对象组时,无需关心这些对象的类型。 具体来说: 对象的创建与使用分离: 抽象工厂模…...
QT网络编程之实现UDP广播发送和接收
推荐一个不错的人工智能学习网站,通俗易懂,内容全面,作为入门科普和学习提升都不错,分享一下给大家:前言https://www.captainbed.cn/ai 一.UDP通信 1.QT中实现UDP通信主要用到了以下类:QUdpSocket、QHost…...
SSL VPN基础原理
目录 SSL ---安全传输协议(安全套接层)---TLS ----传输层安全协议 SSL的工作原理 SSL会话建立的过程 编辑 数据传输过程中的封装示意图 无客户端认证的过程 有客户端认证的过程 SSL VPN的核心技术---虚拟网关技术 服务器验证的点: 资源…...
深入理解FTP协议:文件传输的桥梁
深入理解FTP协议:文件传输的桥梁 在数字化时代,文件传输协议(FTP)是互联网上进行文件交换的重要手段。FTP允许用户在不同的计算机之间传输文件,无论是上传还是下载,都提供了一种稳定且高效的方式。本文将深…...
VisionPro —— CogImageFileTool图像文件管理实战解析
1. CogImageFileTool核心功能解析 第一次接触CogImageFileTool时,我完全被它强大的图像管理能力震撼到了。这个工具就像工业视觉领域的"智能文件管家",专门处理图像文件的读写和存储问题。想象一下,你每天要处理上千张生产线上的产…...
[C语言]控制台扫雷游戏
用精简的代码,回顾数组、函数和游戏逻辑的核心应用。还记得Windows自带的扫雷吗?这次我们用C语言实现一个9x9的简易版,适合用来巩固函数封装、二维数组和随机数等知识点。1. 整体思路 扫雷的核心功能可以拆成几块: 打印菜单&#…...
对 OS:TEP 的 MLFQ 策略的一点思考
1.SJF 调度算法SJF 没啥好说的, 书上讲的很清楚了, SJF 就是最短任务优先原则, 其设计初衷是想解决 FIFO 的糟糕的周转时间的问题.但是, 正如书上所说, 这玩意主打一个秩序井然, 只能处理所有任务同时到队列的情况, 要是某堆进程不按这套路出牌, 那 SJF 立马完蛋, 书上就有一个…...
OpenCV实战:从相机响应函数(CRF)到HDR图像合成的完整流程解析
1. 相机响应函数(CRF)基础解析 第一次听说相机响应函数(CRF)时,我也是一头雾水。简单来说,CRF就是描述相机如何把真实世界的光线强度(L)转换成图像像素值(B)的数学关系。想象一下,你拿着手机对着同一个场景拍三张照片:一张很暗、一…...
分组网络频率同步互通测试
概述随着3G/4G网络大规模的部署和应用,网络和业务的全IP化发展,分组传送技术将替代SDH/MSTP网络而成为主流的传送承载网络。这时,一方面新的传送网络技术会对网络的同步性能提出相应的要求,另一方面在通信网络由电路交换型向分组交…...
ESP32 TCP服务端避坑指南:从端口复用到KeepAlive,这些配置项你真的懂了吗?
ESP32 TCP服务端深度配置实战:从端口复用到KeepAlive参数调优 在物联网设备开发中,TCP服务端的稳定性往往决定着整个系统的可靠性。许多开发者在使用ESP32搭建TCP服务端时,虽然能够快速实现基础通信功能,但当面临多设备连接、网络…...
3步上手ComfyUI-LTXVideo:让文字和图片动起来的AI视频魔法
3步上手ComfyUI-LTXVideo:让文字和图片动起来的AI视频魔法 【免费下载链接】ComfyUI-LTXVideo LTX-Video Support for ComfyUI 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-LTXVideo 想不想把你的文字描述变成生动的视频?或者让静…...
告别兼容性烦恼,让老旧应用在现代浏览器中“无缝”运行
在数字化转型的浪潮中,企业的技术架构往往承载着历史的痕迹。当我们享受着现代浏览器带来的极速体验与丰富扩展时,一个不容忽视的挑战正悄然影响着员工的工作效率与IT运维的平静——那就是“传统浏览器支持”问题。这并非一个遥不可及的技术概念…...
1688图搜接口有复购率对于选品的你们有帮助吗
1688 图搜接口的复购率数据,对选品非常有帮助,是判断商品长期生命力与供应链稳定性的核心指标。一、复购率在图搜选品中的核心价值验证商品质量与用户粘性高复购率(B 端通常 > 20%,优秀 > 30%)直接证明商品质量稳…...
Enformer深度学习模型:基因序列预测的混合架构革命
Enformer深度学习模型:基因序列预测的混合架构革命 【免费下载链接】enformer-pytorch Implementation of Enformer, Deepminds attention network for predicting gene expression, in Pytorch 项目地址: https://gitcode.com/gh_mirrors/en/enformer-pytorch …...
