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,一经查实,立即删除!

相关文章

C#WPF使用MaterialDesign 显示带遮罩的对话框

第一步定义对话框 <UserControlx:Class="TemplateDemo.Views.Edit.UCEditUser"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.m…

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

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

如何打造更高效、安全、灵活的企业网络组网方案

随着互联网的快速发展&#xff0c;企业对于网络的需求也变得越来越高。然而&#xff0c;企业规模不断扩大&#xff0c;分布式办公越来越普遍&#xff0c;如何保证数据安全传输和网络稳定运行是每一家企业都需要面对的问题。因此&#xff0c;合理构建企业组网架构已经成为了现代…

22.Oracle中的临时表空间

Oracle中的临时表空间 一、临时表空间概述1、什么是临时表空间2、临时表空间的作用 二、临时表空间相关语法三、具体使用案例1、具体使用场景示例2、具体使用场景代码示例 点击此处跳转下一节&#xff1a;23.Oracle11g的UNDO表空间点击此处跳转上一节&#xff1a;21.Oracle的程…

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 …

debianubuntu的nvidia驱动升级

背景 给出的机器的驱动版本不符合要求&#xff0c;使用自定义的驱动版本。 前置 如果使用nvidia官方的.run安装的驱动包&#xff0c;可以使用系统自带的nvidia-uninstall命令卸载比较方便&#xff0c;不建议使用apt pruge nvidia-*命令删除。会带来其他的问题。 卸载完成之…

【C 语言经典100例】C 练习实例16 - 最大公约数和最小公倍数

题目&#xff1a;输入两个正整数m和n&#xff0c;求其最大公约数和最小公倍数。 程序分析&#xff1a; &#xff08;1&#xff09;最小公倍数输入的两个数之积除于它们的最大公约数&#xff0c;关键是求出最大公约数&#xff1b; &#xff08;2&#xff09;求最大公约数用辗…

人群计数CSRNet的pytorch实现

本文中对CSRNet: Dilated Convolutional Neural Networks for Understanding the Highly Congested Scenes&#xff08;CVPR 2018&#xff09;中的模型进行pytorch实现 import torch;import torch.nn as nn from torchvision.models import vgg16 vggvgg16(pretrained1)import…

linux守护进程示例

#!/bin/bash 定义 服务的关键字 KEYWORD“XXX.jar” 定义日志文件路径 LOG_FILE“/data/xxx/watch_xxx.log” echo J A V A H O M E > > " JAVA_HOME >> " JAVAH​OME>>"LOG_FILE" 定义记录时间戳的函数 timestamp(){ date “%Y-…

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…

前端怎么实现跨域请求

实现跨域请求&#xff0c;我们首先要先知道什么是跨域&#xff0c;紧接着便是跨域的方法&#xff0c;最后则是跨域时cookie的处理。 什么是跨域 1.什么是同源策略及其限制内容&#xff1f; 同源策略是一种约定&#xff0c;它是浏览器最核心也最基本的安全功能&#xff0c;如果…

飞书全新版本搭载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…

lua_next

lua_pushnil(L);while(lua_next(L, -2)){// 栈状态&#xff1a;key : -2 value : -1// do something lua_pop(L, 1);} lua_next 先弹出一个值&#xff0c; 再放一对pair 到栈上&#xff0c; 参数 index 是表的位置 调用后&#xff1a; -1&#xff1a;value -2:key 因为会先…

力扣labuladong——一刷day59

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣549. 二叉树中最长的连续序列二、力扣1325. 删除给定值的叶子节点 前言 像求和、求高度这种基本的二叉树函数很容易写&#xff0c;有时候只要在它们的后…

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

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