HTML/CSS实现文字环绕图片布局

在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑，如何实现呢？有两种办法： 1.利用图片属性实现 代码如下：

HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局

效果图如下：

设置标签的属性align="right"即可，如果想让图片居左，文字在右环绕，可以将align属性设置为left，其中 vspace 表示图片与文字的上下距离，hspace表示左右距离。 如果是两段及以上文字环绕图片，实现方法：

HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局

第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局

效果图： 2.利用CSS属性实现 代码如下：

效果图如下：

修改float=“right” 即可实现图片在右，文字在左环绕；修改float=“none” 即可实现图片与其标题独占一行，如下图：

如果是两段及以上文字环绕图片，实现方法：

HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局

第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局

ps: float表示使文字环绕在一个元素的四周，clear表示定义某一边是否有环绕文字。