html简单盒子图片文字分栏 两栏float左浮动
最近的项目要用到，第一时间找了个页面准备扒下来，嗯... 等等，这个简单的基础div盒子我应该可以自己写吧。我觉得写不出来就该自己打自己了。简直就是丢学前端的脸啊！
本文源自 钻芒博客:https://www.zuanmang.net/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://60yu.w4i.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> 本文系转载，如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录