html简单盒子图片文字分栏 两栏float左浮动
- 2019 年 11 月 14 日
- 筆記
最近的项目要用到，第一时间找了个页面准备扒下来，嗯… 等等，这个简单的基础div盒子我应该可以自己写吧。我觉得写不出来就该自己打自己了。简直就是丢学前端的脸啊！
本文源自 钻芒博客:https://www.zmki.cn/4909.html
于是乎便动手开始，结构如下图
效果如下
html（样式表都写了注释）
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> .dahezhi{ width: 100%; /* 定义一个大盒子 宽度100% */ } .dahezi_img_left{ /* 第二个盒子, */ float: left; /* 要左浮动 */ margin-right: 40px; /* 为了让图片和文字不贴着,右外边距定义40px */ } .dahezi_txt_right{ /* 定义第三盒子 */ font-size: 15px; /* 设置字体大小 */ line-height: 1.6; /* 设置行距 */ } img{ width: 500px; /* 标签样式 让图片宽度500px, */ height: auto; /* 高度自动 随它去吧 */ } </style> </head> <body> <div class="dahezhi"> <div class="dahezi_img_left"><img src="https://a-oss.zmki.cn/2019/20191007-5d9b54ba5e757.jpg" /> </div> <div class="dahezi_txt_right"> XX市XX电子科技有限公司成立于2005年，是一家主要 以提供小型电器智能控制产品的高科技企业。公司拥有多项专利，以 领先的智能控制方案,创造美好的生活. 公司每年研发100多款新产品，年产量400万套以上。小 型生活电器智能产品已被Conair、TCM、BOOTS、 Carr era等欧美著 名品牌公司及PAITER等国内著名品牌公司所采用。 公司拥有快速反应的资深研发团队，专业的研发能力，能 根据客户的要求，在较短的时间内提供各种性能优越、符合认证要 求的电器控制产品服务。公司拥有专业的智能控制器生产工厂，全 面导入和推行IS09001: 2000 质量管理体系，拥有丰富的产品研发设 计和生产经验，有经验丰富的生产、品保队伍，研发、生产及检验 等各环节严格按IS09001质量管理体系的要求运作，同时先进的供著 名品牌公司及PAITER等国内著名品牌公司所采用。 公司拥有快速反应的资深研发团队，专业的研发能力，能 根据客户的要求，在较短的时间内提供各种性能优越、符合认证要 求的电器控制产品服务。公司拥有专业的智能控制器生产工厂，全 面导入和推行IS09001: 2000 质量管理体系，拥有丰富的产品研发设 计和生产经验，有经验丰富的生产、品保队伍，研发、生产及检验 等各环节严格按IS09001质量管理体系的要求运作，同时先进的供... </div> </div> </body> </html>
