html/css中用float实现的盒子案例

运行效果:

代码部分:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">.father{width:300px; height:400px; background:gray;}.box1{width:100px; height:100px; background:red;}.box2{width:100px; height:100px; background:blue;float:right;}.box3{width:200px; height:100px; background:green;}	.box4{width:100px; height:200px; background:yellow;float:right;}.f1{width:200; height:100px}.f2{width:200px; height:200px;}.c{margin:0 auto}
</style>
</head>
<body><div class="father c"><div class="box4">44444</div><div class="f2"><div class="f1"><div class="box2">22222</div><div class="box1">11111</div></div><div class="box3">33333</div></div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/184204.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

svn合并冲突时每个选项的含义

合并冲突时每个选项的含义 - 这个图片是 TortoiseSVN&#xff08;一个Subversion&#xff08;SVN&#xff09;客户端&#xff09;的合并冲突解决对话框。当你尝试合并两个版本的文件并且出现差异时&#xff0c;你需要解决这些差异。这个对话框提供了几个选项来处理合并冲突&…

LeetCode(39)赎金信【哈希表】【简单】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 赎金信 1.题目 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字…

Mysql DDL语句建表及空字符串查询出0问题

DDL语句建表 语法&#xff1a; create table 指定要建立库的库名.新建表名 &#xff08;... 新建表的字段以及类型等 ...&#xff09;comment 表的作用注释 charset 表编译格式 row_format DYNAMIC create table dev_dxtiot.sys_url_permission (id integer …

hyper-V操作虚拟机ubuntu 22.03

安装hyper-V 点击卸载程序 都勾选上即可 新建虚拟机&#xff0c;选择镜像文件 选择第一代即可 设置内存 配置网络 双击 启动安装虚拟机 输入用户名 zenglg 密码&#xff1a;LuoShuwen123456 按照enter键选中openssh安装 安装中 安装完成 选择重启 输入用户名、密码

教育企业CRM选择技巧

教育行业的发展一波三折&#xff0c;要想在激烈的赛道脱颖而出&#xff0c;就需要有一套有效的CRM系统&#xff0c;来帮助教育机构提升招生效率、增加学员留存、提高教学质量。下面说说&#xff0c;教育企业选择CRM系统要具备的四大功能。 1、招生管理功能 教育机构的首要目标…

springboot+mysql实现就业信息管理系统

springbootmysql实现的就业信息管理系统,有普通用户和管理员两种角色,演示地址:yanshi.ym4j.com:8091 普通用户账号&#xff1a;test 密码&#xff1a;123456管理员账号&#xff1a;admin 密码&#xff1a;123456 共包含就业信息管理、就业统计、用户管理等功能。 登录 就业信…

企业软件的分类|app小程序网站定制开发

企业软件的分类|app小程序网站定制开发 企业软件是指为满足企业管理和运营需求而设计和开发的一类软件&#xff0c;它通常用于支持企业的各项业务活动和流程。根据其功能和应用领域的不同&#xff0c;可以将企业软件分为以下几类。 1. 企业资源计划&#xff08;ERP&#xff09…

飞书全新版本搭载AI智能伙伴,支持用户自选底层大模型!

原创 | 文 BFT机器人 近日&#xff0c;字节跳动旗下飞书正式发布“飞书智能伙伴”系列AI产品。此次新产品有专属、易协作、有知识、有记忆、更主动等特点。除此之外&#xff0c;“飞书智能伙伴”作为一个开放的AI服务框架&#xff0c;各企业可根据业务场景自主选择适合的底层大…

13:kotlin类和对象 -- 属性(Properties)

定义属性 类属性可使用var和val定义 class Address {var name: String "Holmes, Sherlock"var street: String "Baker"var city: String "London"var state: String? nullvar zip: String "123456" }属性使用 fun copyAddres…

一次解决套接字操作超时错误的过程

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 在windows客户端使用QTcpSocket连接一个ubuntu服务端程序&#xff0c;出现套接字操作超时的错误。开始感觉还莫名其妙的&#xff0c;因为之前连接都是好好…

鸿蒙系统扫盲(三):鸿蒙开发用什么语言?

1.两种开发方向 我们常说鸿蒙开发&#xff0c;但是其实鸿蒙开发分为两个方向&#xff1a; 一个是系统级别的开发&#xff0c;比如驱动&#xff0c;内核和框架层的开发&#xff0c;这种开发以C/C为主 还有一个是应用级别的开发&#xff0c;在API7以及以下&#xff0c;还是支持…

Codeforces Round 907 (Div. 2) (C 贪心 D套路? F dfs序+差分树状数组)

A&#xff1a; 这种操作题&#xff0c;每次先想这个操作有什么性质 对于2^0来说可以操作 第1位 对于2^1来说可以操作 第1-2位 对于2^2来说可以操作 第1-4位 &#xff08;第3位无法单独修改&#xff09; 对于2^3来说可以操作 第1-8位&#xff08;第5 6 7位无法单独修改&…

Redis的高可用模式

1. 什么是高可用&#xff1f; 高可用&#xff08;High Availability, HA&#xff09;是指在信息技术中确保系统、服务或应用程序在绝大多数时间内都是可操作和可访问的能力。这通常涉及以下几个关键方面&#xff1a; 最小化停机时间: 高可用系统的目标是减少因硬件故障、系统升…

Talk | UCSB博士生许闻达:细粒度可解释评估初探

本期为TechBeat人工智能社区第551期线上Talk。 北京时间11月29日(周三)20:00&#xff0c;UC Santa Barbara博士生—许闻达的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “细粒度可解释评估初探”&#xff0c;分享了他们团队在具备解释性的细粒度…

流程不会搭建?集简云上线AI智能创建流程功能,辅助您更简单地创建自动化流程

用户在使用集简云创建流程时&#xff0c;经常会遇到的两个问题&#xff1a; 1. 不知道要如何选择应用动作&#xff0c;和动作的执行顺序&#xff1b; 2. 应用动作设置中的字段匹配&#xff0c;不知道要如何选择对应的字段&#xff1b; 集简云基于大量历史数据积累与自训练AI模…

BatchOutput PDF for Mac(PDF 批量处理软件)

BatchOutput PDF是一款适用于 Mac 的 PDF 批量处理软件。它可以帮助用户将多个 PDF 文件进行异步处理&#xff0c;提高工作效率。 BatchOutput PDF 可以自动化执行许多任务&#xff0c;包括 PDF 文件的打印、转换、分割、压缩、加密、重命名等&#xff0c;而且它还可以将自定义…

通过流量监控分析某个部门或客户端网络性能

在当今数字化时代&#xff0c;网络已经成为组织和企业不可或缺的基础设施之一。作为信息传输和数据交互的关键载体&#xff0c;网络的性能对于保障业务的稳定运行和提升工作效率至关重要。因此&#xff0c;对某个部门或客户端网络的性能进行分析和评估&#xff0c;有助于了解当…

MGF4964BL-01 低噪声 InGaAs HEMT(高电子迁移率晶体管) K波段放大器 微X型塑料封装

MGF4964BL-01超低噪声 InGaAs HEMT(高电子迁移率晶体管)设计用于K波段放大器。MGF4964BL-01是符合 RoHS 标准的产品&#xff0c;通过无铅认证。 MGF4964BL-01特征&#xff1a; f20GHz NFmin 时的低噪声系数。0.65 分贝(典型值) f20GHz 时的高相关增益 Gs 13.5dB(典型值。) MG…

spring cloud Eureka注册中心和Nacos注册中心

文章目录 Eureka注册中心.Eureka的结构和作用搭建eureka-server创建 服务引入eureka依赖编写启动类编写配置文件启动服务 服务注册1&#xff09;引入依赖2&#xff09;配置文件3&#xff09;启动多个user-service实例 服务发现1&#xff09;引入依赖2&#xff09;配置文件3&…

Stability AI 新发布SDXL Turbo:一款实时文本到图像生成模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…