当前位置: 首页 > news >正文

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.lryc.cn/news/254748.html

相关文章:

  • simulink中 Data store memory、write和read模块及案例介绍
  • java设计模式学习之【装饰器模式】
  • Ubuntu宝塔面板本地部署Emlog个人博客网站并远程访问【内网穿透】
  • 简述IO流的使用以及使用时需要注意的事项
  • 西工大计算机学院计算机系统基础实验一(函数编写11~14)
  • Spring 声明式事务
  • 通达OA inc/package/down.php接口存在未授权访问漏洞
  • 数据库原理: 笛卡儿积
  • docker安装配置prometheus+node_export+grafana
  • 【JavaScript】JS——Map数据类型
  • 【【FPGA的 MicroBlaze 的 介绍与使用 】】
  • PyQt pdf格式保存
  • 微前端介绍
  • 工业机器视觉megauging(向光有光)使用说明书(一,轻量级的visionpro)
  • Java——面试:String 和 StringBuffer 的区别?
  • 图扑软件受邀出席高交会-全球清洁能源创新博览会
  • vue项目下npm或yarn下安装echarts多个版本
  • 在内网开发中使用Nginx代理来访问钉钉新版服务端API
  • 机器学习算法如何进行特征重要性评估
  • 运行启动vue项目报报错node: --openssl-legacy-provider is not allowed in NODE_OPTIONS解决
  • 网工学习5 交换机端口相关配置
  • 使用Pytorch从零开始实现CLIP
  • Java网络编程 *TCP与UDP协议*
  • 校园外卖小程序源码系统 附带完整的搭建教程
  • TiDB专题---1、TiDB简介和特性
  • 如何二次封装一个Vue3组件库?
  • 2024年网络安全比赛--系统渗透测试(超详细)
  • 高效的单行python脚本
  • 如何通过内网穿透实现无公网IP也能远程访问内网的宝塔面板
  • 【广州华锐互动】VR沉浸式体验铝厂安全事故让伤害教育更加深刻