下载掌阅APP，畅读海量书库
立即打开
实现图文样图布局的效果，如图2-18所示。
1）把一张图和一段文字置入页面中。
2）使用float让图片浮起来，与文本实现布局效果。
3）文本有首行缩进的效果。
1 在组件列表中，创建目录images，并把图片复制到images目录中，如图2-19所示。
图2-18 图文样图布局
图2-19 把图片复制到images目录中
设置“float:left;”样式的图片，再使用“margin:20rpx;”，此时图片与周围的文本就有了20rpx的间距。
2 打开index.wxml，添加＜image src="../../images/wx.png"＞、＜view class="txt"＞组件，＜view class="txt"＞组件包括一段文字，文字内容可随意输入。
3 打开index.wxss，添加image、.txt等样式，实现视图效果，如图2-19所示。
float（浮动）往往用于图片。浮动的图片可以与文本排版出许多有用的效果。
例：
“float:left;”图片浮动并靠左对齐，浮动的图片不遮挡文字。
text-indent属性规定文本块中首行文本的缩进。
例：
“text-indent:80rpx;”文本块中的首行文本缩进80rpx。
清除浮动时使用clear属性。
元素浮动之后，后续的元素都因浮动而影响排列。为了避免这种情况，当需要清除浮动的影响时，可使用clear属性。
例：
“clear:both;”属性指定元素两侧不能出现浮动元素。