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

news2025/1/12 6:14:55

运行效果：

代码部分：

<!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.coloradmin.cn/o/1274714.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据探索：五款免费数据可视化工具概览

数据探索：五款免费数据可视化工具概览

数据可视化是解读和传达数据的重要方式&#xff0c;而现在有许多免费的工具可供选择&#xff0c;让您在探索数据时更轻松、更有趣。以下是五款推荐的免费数据可视化工具&#xff1a; Tableau Public&#xff1a; Tableau Public是一款功能强大的可视化工具&#xff0c;能够创建…
阅读更多...
POI和EasyExcel读写Excel 操作

POI和EasyExcel读写Excel 操作

POI和EasyExcel读写Excel 操作 1.POI读写Excel 数据1.1 导入依赖1.2 POI Excel 写 03和07版本方式(小数据量)1.3 大文件写HSSF&#xff08;03版&#xff09;1.4 大文件写XSSF&#xff08;07版&#xff09;1.5 大文件写SXSSF 2.POI Excel读 03和07版本方式2.1 读取数据&#xff…
阅读更多...
【ASP.NET CORE】数据迁移 codefirst

【ASP.NET CORE】数据迁移 codefirst

已经写好实体类&#xff0c;使用add-migration生成数据迁移语句&#xff0c;注意如果项目中有多个dbcontext需要使用 -context 名称&#xff0c;指定下需要使用的dbcontext add-Migration Address -context mvcsqlcontext运行后会生成两个文件 2. 使用Update-Database语句更…
阅读更多...
设计模式详解（二）：抽象工厂——Abstract Factory

设计模式详解（二）：抽象工厂——Abstract Factory

目录导航 抽象工厂及其作用工厂方法的好处工厂方法的实现关系图实现步骤 工厂方法的适用场景工厂方法举例 抽象工厂及其作用 工厂方法是一种创建型设计模式。所谓创建型设计模式是说针对创建对象方面的设计模式。在面向对象的编程语言里&#xff0c;我们通过对象间的相互协作&…
阅读更多...
无需繁琐编程 开启高效数据分析之旅！

无需繁琐编程 开启高效数据分析之旅！

不学编程做R统计分析&#xff1a;图形界面R Commander官方手册 R Commander是 R 的图形用户界面&#xff0c;不需要键入命令就可通过熟悉的菜单和对话框来访问 R 统计软件。 R 和 R Commander 均可免费安装于所有常见的操作系统——Windows、Mac OS X 和 Linux/UNIX。 本书作…
阅读更多...
【你来了】舞台就是你的：深圳COC社区职言职语第2季劲爆来袭......

【你来了】舞台就是你的：深圳COC社区职言职语第2季劲爆来袭......

​ 职言职语第1季活动回顾 活动总结见&#xff1a;【活动总结】0723-COC深圳社区职言职语第1季活动总结之第1视角_架构师李肯-深圳城市开发者社区 (csdn.net) 活动介绍 &#x1f389;&#x1f465; 欢迎加入职言职语第2季活动&#xff01;与我们一起来探索职场的智慧和灵感&…
阅读更多...
双链表创建 插入 删除

双链表创建 插入 删除

双链表的创建 #define NULL 0 #include<stdio.h>typedef struct DNode{ //双链表类型int data;struct DNode *prior,*next; }DNode,*DLinkList;bool InitDLinkList(DLinkList &L){L (DNode*)malloc(sizeof(DNode)); //分配一个头结点if (LNULL)…
阅读更多...
L1-010：比较大小

L1-010：比较大小

题目描述 本题要求将输入的任意3个整数从小到大输出。 输入格式: 输入在一行中给出3个整数&#xff0c;其间以空格分隔。 输出格式: 在一行中将3个整数从小到大输出&#xff0c;其间以“->”相连。 输入样例: 4 2 8输出样例: 2->4->8 程序代码 #include<stdio.h&…
阅读更多...
几个linux指令提升编程效率

几个linux指令提升编程效率

history history命令是Linux/Unix系统中的一个常用命令&#xff0c;用于查看当前用户在命令行中执行过的命令历史记录。该命令允许用户查看、搜索、编辑和执行之前执行过的命令&#xff0c;为用户提供了方便、快捷的操作方式。 查看历史命令&#xff1a; history查看最近n条…
阅读更多...
【android开发-10】android中四种布局详细介绍

【android开发-10】android中四种布局详细介绍

在Android开发中&#xff0c;常见的四种布局分别是&#xff1a;线性布局&#xff08;LinearLayout&#xff09;、相对布局&#xff08;RelativeLayout&#xff09;、帧布局&#xff08;FrameLayout&#xff09;和绝对布局&#xff08;AbsoluteLayout&#xff09;。 注意&#…
阅读更多...
【紫光同创PCIE教程】——使用官方驱动在Windows下进行DMA读写操作/PIO读写操作

【紫光同创PCIE教程】——使用官方驱动在Windows下进行DMA读写操作/PIO读写操作

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处&#xff08;www.meyesemi.com) 紫光同创官方主推的是在linux系统下开发驱动和上层软件&#xff0c;相应地&#xff0c;官方提供了在linux一个基于GTK2…
阅读更多...
户外电力检测设备，如何实现远程数据实时互通？

户外电力检测设备，如何实现远程数据实时互通？

北京某企业专注于电力设备的局部放电检测与监测技术的研究与实践应用&#xff0c;可提供局部放电开关柜检测、高频局部放电发电机检测、电力设备绝缘检测等方案。 在实际项目实施过程&#xff0c;企业工作人员需要在各地电力设施部署放电监测设备并进行检测。由于经常涉及户外的…
阅读更多...
jQuery的使用

jQuery的使用

目录 jquery对象&#xff1a; jquery作为一般函数调用参数: jquery事件机制 jquery dom操作 jquery对象&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" cont…
阅读更多...
Android 12 及以上授权精确位置和模糊位置

Android 12 及以上授权精确位置和模糊位置

请求位置信息权限 为了保护用户隐私&#xff0c;使用位置信息服务的应用必须请求位置权限。 请求位置权限时&#xff0c;请遵循与请求任何其他运行时权限相同的最佳做法。请求位置权限时的一个重要区别在于&#xff0c;系统中包含与位置相关的多项权限。具体请求哪项权限以及…
阅读更多...
数据结构：字典树（前缀树，Trie树），压缩字典树（Radix）

数据结构：字典树（前缀树，Trie树），压缩字典树（Radix）

字典树Trie Tree 字典树也称前缀树&#xff0c;Trie树。在 Elasticsearch 的倒排索引中用的也是 Trie 树。是一种针对字符串进行维护的数据结构。 字典树是对词典的一种存储方式&#xff0c;这个词典中的每个“单词”就是从根节点出发一直到某一个目标节点的路径&#xff0c;…
阅读更多...
C++算法入门练习——有向图判环

C++算法入门练习——有向图判环

现有一个共n个顶点、m条边的有向图&#xff08;假设顶点编号为从0到n-1&#xff09;&#xff0c;如果从图中一个顶点出发&#xff0c;沿着图中的有向边前进&#xff0c;最后能回到这个顶点&#xff0c;那么就称其为图中的一个环。判断图中是否有环。 解题思路&#xff1a; 判断…
阅读更多...
Python datetime 字符串 相互转 datetime

Python datetime 字符串 相互转 datetime

字符串转 datetime from datetime import datetime# 定义要转换的日期时间字符串 dt_str "2021-09-30 15:48:36"# 使用datetime.strptime()函数进行转换 dt_obj datetime.strptime(dt_str, "%Y-%m-%d %H:%M:%S") print(dt_obj)datetime 转字符串 from …
阅读更多...
2023年11月随笔之双11成为有qian人

2023年11月随笔之双11成为有qian人

1. 回头看 日更坚持了334天。 学信息系统项目管理师第4版系列全部更新完成 读《图数据库实战》缓缓更...... 读《读程序员的制胜技》开更并更新完成 读《像火箭科学家一样思考&#xff1a;将不可能变为可能》开更持续更新中 11月码字68883字&#xff0c;日均码字数2296字…
阅读更多...
2023年中国金融租赁行业研究报告

2023年中国金融租赁行业研究报告

第一章 行业概况 1.1 定义 金融租赁是一种融资方式&#xff0c;其中租赁公司&#xff08;出租人&#xff09;为企业&#xff08;承租人&#xff09;购买所需设备&#xff0c;并在租赁期内由承租人使用。承租人负责支付租金&#xff0c;租赁期满后有权选择退租、续租或购买设备…
阅读更多...
24年5月软考高项考哪些内容，考试大纲什么的?

24年5月软考高项考哪些内容，考试大纲什么的?

信息系统项目管理师属于「计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试」中的高级资格考试。 也称「软考高项」&#xff0c;可以「以考代评」用来评副高级职称。 一、软考备考前期准备 信息系统项目管理师考试科目包括&#xff1a; 《综合知识》、《案例分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023