如何用实现文字环绕图片？

最新推荐文章于 2023-06-01 12:44:25 发布

ditong8935

最新推荐文章于 2023-06-01 12:44:25 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/One-sprite/p/8434899.html

版权

方法1-CSS实现：

　　直接對著圖片設置 float 就可以了

img {
  float: right;
  padding: 20px 0 20px 20px;
}

　　這樣你把圖片插入在哪行，它就會以那行為基準貼齊右側

　　存在问题：当把中间的文字替换成连续的英文字母时，文字不换行

　　问题原因：浏览器默认解析英文或者数字时，是按照单词进行解析。也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。

　　解决方法：使用 word-break: break-all 强制换行

　　后记：word-wrap : break-word --允许长单词换行到下一行。

当一个单词长度超过div的宽度时，默认是不会换行的。

方法2-图片属性实现：

　　设置标签的属性align=”right”即可，如果想让图片居左，文字在右环绕，可以将align属性设置为left。

　　其中 vspace 表示图片与文字的上下距离，hspace表示左右距离。

<p style="width:400px;">
    <img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5">
</p>

转载于:https://www.cnblogs.com/One-sprite/p/8434899.html

关注