ivx教程 在H5中如何实现文本环绕图片的效果

评论427

在使用iVX开发应用的过程中,经常会遇到需要实现文本环绕图片或者类似的效果,如下图:
ivx教程 在H5中如何实现文本环绕图片的效果-图片1

想要实现这种效果,只需要添加一些自定义样式。下面是一个简单的示例:
首先在对象树中添加一个行,行内有一个图片和一个文本。
ivx教程 在H5中如何实现文本环绕图片的效果-图片2

接着给行添加一个自定义样式display: block
ivx教程 在H5中如何实现文本环绕图片的效果-图片3

然后给图片添加一个样式float: left
ivx教程 在H5中如何实现文本环绕图片的效果-图片4

最后,给文本添加一个自定义样式display: block,并且要将文本的“溢出效果”属性设置为“溢出”
ivx教程 在H5中如何实现文本环绕图片的效果-图片5

这样就实现了文本包裹图片的效果啦
ivx教程 在H5中如何实现文本环绕图片的效果-图片6

 

发表评论

匿名网友