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.hqwc.cn/news/236139.html

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

相关文章

uc_12_进程间通信IPC_有名管道_无名管道

1 内存壁垒 进程间天然存在内存壁垒&#xff0c;无法通过交换虚拟地址直接进行数据交换&#xff1a; 每个进程的用户空间都是0~3G-1&#xff08;32位系统&#xff09;&#xff0c;但它们所对应的物理内存却是各自独立的。系统为每个进程的用户空间维护一张专属于该进程的内存映…

如何通过linux调用企业微信发送告警消息

一、前期准备 1、企业微信具备管理企业权限。 2、服务器有公网IP或者可以将本机端口通过net映射到公网。 二、通过脚本向企业微信发送消息 1、创建sh脚本用来发送消息。 vim 2.sh 注意&#xff1a;脚本中xxxx信息需要在企业微信管理后台获取。 #!/bin/bash # 设置企业…

【漏洞复现】通达OA inc/package/down.php接口存在未授权访问漏洞 附POC

漏洞描述 通达OA(Office Anywhere网络智能办公系统)是由通达信科科技自主研发的协同办公自动化软件,是与中国企业管理实践相结合形成的综合管理办公平台。通达OA为各行业不同规模的众多用户提供信息化管理能力,包括流程审批、行政办公、日常事务、数据统计分析、即时通讯、…

类和对象——(3)再识对象

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 你说那里有你的梦想&#xff0c;…

【数电笔记】码制

目录 说明&#xff1a; 二进制代码 1. 二 - 十进制码 2. 常用二 - 十进制代码表 2.1 例题 可靠性代码 1. 格雷码 2. 奇偶校验码 3. 8421奇偶校验码表 说明&#xff1a; 笔记配套视频来源&#xff1a;B站 二进制代码 1. 二 - 十进制码 2. 常用二 - 十进制代码表 2.1 例题…

初识Java 18-6 泛型

目录 潜在类型机制 支持潜在类型机制的语言 Python的潜在类型机制 C的潜在类型机制 Java中的直接潜在类型机制 潜在类型机制的替代方案 反射 将方法应用于序列中的每个元素 Java 8的潜在类型机制&#xff08;间接实现&#xff09; 潜在类型机制的使用例&#xff08;S…

解决:uniapp项目打包微信小程序时,报错:failed to load config from /xx/xx-mall/vite.config.ts

复现步骤&#xff1a;在vscode终端中运行&#xff1a;pnpm build:mp-weixin-prod 命令&#xff0c;打包小程序生产包时&#xff0c;报错failed to load xxx/vite.config.ts&#xff0c;但实际项目根目录中有该vite.config.ts文件。 项目使用技术&#xff1a;uniapp vue3 node…

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

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

Paraformer 语音识别原理

Paraformer(Parallel Transformer)非自回归端到端语音系统需要解决两个问题&#xff1a; 准确预测输出序列长度&#xff0c;送入预测语音信号判断包含多少文字。 如何从encoder 的输出中提取隐层表征&#xff0c;作为decoder的输入。 采用一个预测器&#xff08;Predictor&…

2的幂运算

2的幂 描述 : 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 题目 : LeetCode 231.2的幂 : 231. 2 的幂 分…

element中el-form-item设置label-width=‘auto‘报错

文章目录 一、问题二、解决三、最后 一、问题 el-form中的设置了全局标题宽度是200px&#xff0c;此时想要对el-form-item取消标题宽度&#xff0c;设置了label-widthauto&#xff0c;结果&#xff0c;报错了~~~ <el-form label-width"200px" label-position&quo…

excel 计算断面水质等级

在工作中遇到根据水质监测结果要判断断面等级。写了下面的公式&#xff1a; 因子标准值 limits {COD: [15,15, 20, 15,20],氨氮: [0.15, 0.5, 1, 1.5, 2.0],总磷: [0.02, 0.1, 0.2, 0.3, 0.4] } excel公式&#xff1a; IFS(MAX(IF(M2>20,1,0), IF(N2>2,1,0), IF(O2&g…