直播带货源码，CSS 3之图文混排效果

1. 设置图片与文字间距

用 padding 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；

padding 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；

注意：不允许指定负边距值；

语法格式如下所示：

1	`<br>padding:padding-top \|padding-right \|padding-bottom \|padding-left<br>`

参数说明：

padding-top：设置距离顶部内边距；

padding-right ：设置距离右边内边距；

padding-bottom ：设置距离底部内边距；

padding-left ：设置距离左部内边距；

例子 1：

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>文字环绕</title><br><style><br>img{max-width: 250px;<br>float: left;<br>padding-top:15px ;<br>padding-right: 55px;<br>padding-bottom: 15px;<br>}<br></style><br></head><br><body><br><p>花开再美，怎如初见？<br><img src="3.jpg"/><br> <br></p><br></body><br></html><br> 

2. 文字环绕效果

使用 float 属性能实现文字环绕效果；

float 属性主要定义元素在哪个方向浮动；

一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；

浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；

语法格式如下所示：

1	`<br>float:none \|left \|right<br>`

例子 2：

<br><!DOCTYPE html><br><html><br><head><br><meta charset="utf-8"><br><title>文字环绕</title><br><style><br>img{<br>max-width: 185px;<br>float: left;<br>}<br></style><br></head><br><body><br><p>花开再美，怎如初见？<br><img src="3.jpg"/><br>  <br></p><br></body><br></html>

以上就是直播带货源码，CSS 3之图文混排效果，更多内容欢迎关注之后的文章