您当前的位置：主页 > 教程合集 > Html/css > 网站首页Html/css
用Html和CSS实现文字环绕图片的方法
发布时间：2018-07-26 16:37:41编辑：余斗阅读：(0)字号： 大 中 小
在一个图文并茂的网页上，文字环绕图片可以使布局美观紧凑，如何实现呢？
余斗给大家介绍两种办法：
一、利用CSS属性实现
代码如下：
<div style="width:400px;">
<div style="float:left; clear: both;" align="center">
<img src="images/bkjj.jpg" hspace="8"><br/> 图像标题
</div>
CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局
</div>
效果图如下：
修改float=”right”即可实现图片在右，文字在左环绕；修改float=”none”即可实现图片与其标题独占一行，如下图：
需要注意的是：float表示使文字环绕在一个元素的四周，clear表示定义某一边是否有环绕文字。
二、利用图片属性实现
代码如下：
<p style="width:400px;">
<img src="images/bkjj.jpg" hspace="5" vspace="5">
HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局
</p>
效果图如下：
设置标签的属性align=”right”即可，如果想让图片居左，文字在右环绕，可以将align属性设置为left，其中vspace表示图片与文字的上下距离，hspace表示左右距离。
- 转载请注明：用Html和CSS实现文字环绕图片的方法
- 版权声明：本站原创文章，由余斗余斗发表在Html/css分类下，于2018-07-26最后更新