html简单盒子图片文字分栏 两栏float左浮动

2023-05-16 15:08:40 浏览数 (1)

最近的项目要用到,第一时间找了个页面准备扒下来,嗯... 等等,这个简单的基础div盒子我应该可以自己写吧。我觉得写不出来就该自己打自己了。简直就是丢学前端的脸啊!

本文源自 钻芒博客:https://www.zuanmang.net/4909.html

于是乎便动手开始,结构如下图

效果如下

html(样式表都写了注释)

代码语言:javascript复制
<!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>	

0 人点赞