主页 > 教程合集 > Html/css >

用Html和CSS实现文字环绕图片的方法

时间:2018-07-26 阅读:0

在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?

用Html和CSS实现文字环绕图片的方法

余斗给大家介绍两种办法: 

一、利用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>
 

效果图如下:

用Html和CSS实现文字环绕图片的方法

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

用Html和CSS实现文字环绕图片的方法

需要注意的是: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>
 

效果图如下:

用Html和CSS实现文字环绕图片的方法

设置标签的属性align=”right”即可,如果想让图片居左,文字在右环绕,可以将align属性设置为left,其中vspace表示图片与文字的上下距离,hspace表示左右距离。

如果这篇博文对你有帮助,希望您可以打赏给博主余斗,以支持余斗继续坚持下去!

余斗个人博客打赏二维码

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2018-07-26最后更新,转载注明出处。

相关推荐

返回顶部