html+css图片和文字的布局

最新推荐文章于 2024-05-20 16:37:37 发布

原创最新推荐文章于 2024-05-20 16:37:37 发布 · 1.8k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #css3

收录于

web study 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何使用CSS中的浮动属性来实现图文混排效果。通过设置div.pic为浮动元素，使其不会压住标准流中的文字，从而达到图片环绕文字的布局。HTML结构包括一个图片div和文字描述，CSS样式定义了图片尺寸、颜色以及文字的字体、大小和颜色。这种方法常用于前端开发中的页面布局设计。

问题：涉及图片和文字的布局
思路：利用浮动的盒子不会压住标准流文字，文字是环绕图片的特性进行排列的。

效果图：

在这里插入图片描述

1.html结构

   <div>
			<div class="pic"></div>
			<h5>正品保障</h5>
			<p>正品保障，提供发票</p>
  </div>

2.CSS样式

	
		div .pic{
		float: left;
		width: 49px;
		height: 49px;
		background-color: #c81623;
		margin-right: 7px;
		}
		
		div h5 {
		margin-top: 5px;
		font-size: 14px;
		line-height: 20px;
		color: #333333;
		}
		div p{
		margin-top: 3px;
		font-family: SimSun;
		font-size: 12px;