主页 > 教程合集 > 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表示左右距离。

本站所有资源均在Resource资源站有售,你可以点击》》Resource《《进入资源站自助购买,也可以扫描以下店铺二维码直接选购,自动极速发货

余斗微信二维码

扫描微信加好友咨询
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

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

相关推荐

返回顶部