1. 设置图片与文字间距

用 padding 属性能设计图片和文字之间的距离，即文字与图片之间在一定间距；
padding 属性主要用来在一个声明中设置所有内边距属性，即能设置元素所有内边距的宽度，或设置各边上内边距的宽度；
注意： 不允许指定负边距值；
语法格式如下所示：

padding:padding-top |padding-right |padding-bottom |padding-left

参数说明：

padding-top：设置距离顶部内边距；
padding-right ：设置距离右边内边距；
padding-bottom ：设置距离底部内边距；
padding-left ：设置距离左部内边距；

例子 1：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字环绕</title><style>img{max-width: 250px;float: left;padding-top:15px ;padding-right: 55px;padding-bottom: 15px;}</style></head><body><p>花开再美，怎如初见？<img src="3.jpg"/>人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。</p></body>
</html>

2. 文字环绕效果

使用 float 属性能实现文字环绕效果；
float 属性主要定义元素在哪个方向浮动；
一般应用于图像，使文本环绕在图像周围，也能定义其他元素浮动；
浮动元素会生成一个块级框，不论它本身是何种元素；若浮动元素非替换元素，则要指定一个明确的值；否则，他们尽可能地窄；
语法格式如下所示：

float:none |left |right

例子 2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字环绕</title><style>img{max-width: 185px;float: left;}</style></head><body><p>花开再美，怎如初见？<img src="3.jpg"/>人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变。骊山语罢清宵半，泪雨霖铃终不怨。何如薄幸锦衣郎，比翼连枝当日愿。</p></body>
</html>

CSS 3之图文混排效果相关推荐

CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属 ...
UITextView实现图文混排效果
用UITextView实现图文混排效果的展示,首先要禁用UITextView的编辑功能,将属性editable设置为NO 1.首先创建一个NSTextAttachment对象,这个对象有一个image ...
用CSS实现HTML图文混排
在网页中经常需要文字环绕图片,或文字与图片分开来排列,目前常用的方法是使用表格来定位文字和图片以此来实现 .但对于动态的网页,图文混排的格式并不是一成不变的所以要想动态的生成表格来实现图文混排是非常困 ...
NGUI制作Word图文混排效果
先上个自己做的例子,第一次写博客,先写个简单的例子吧,都是自己做的小demo,希望大家不要喷呐! 这个效果还是很简单滴,关键在于用两个UILabel来显示文字内容,其中一个UILabel与图片放于同一 ...
android直播聊天室图文混排效果,仿抖音直播聊天室换行内容TextView+ReplacementSpan...
一.抖音聊天室文本,看似简单并非简单抖音文本换行. 二.实现方案TextView + ReplacementSpan 方案思路利用span原理,继承ReplacementSpan,自定义VIewS ...
仿微信表情输入键盘(支持 Gif 表情图文混排 )
作者 | PandaQ404 地址 | http://www.jianshu.com/p/fddca2b0a26b 声明 | 本文是 PandaQ404 原创,已获授权发布,未经原作者允许请勿转载简 ...
mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排，仿微信表情输入...
该库具有以下特点: 支持 emoji 表情图片支持 gif 动态表情输入显示支持单张贴图表情(与微信收藏表情一致) 支持题图表情库的添加删除效果图: 快速使用引入库 compile 'com. ...
ListView异步加载图片，完美实现图文混排
昨天参加一个面试,面试官让当场写一个类似于新闻列表的页面,文本数据和图片都从网络上获取,想起我还没写过ListView异步加载图片并实现图文混排效果的文章,so,今天就来写一下,介绍一下经验. Lis ...
css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...

CSS 3之图文混排效果

图文混排效果

1. 设置图片与文字间距

2. 文字环绕效果

CSS 3之图文混排效果相关推荐

最新文章

热门文章