如何用实现文字环绕图片?
方法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>