CSS 实现文字环绕可以使用 float 来实现, 下面介绍下具体的实现方法.
1) 代码部分
- <style>
- .img-left {
- border: 3px solid #005588;
- width:300px;
- }
- .img-left img {
- float:left; /* 对图片进行浮动就可以实现了 */
- width:150px;
- }
- </style>
- <div class="img-left">
- <img src="./img.png" alt="pic"/>
这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这
是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是
一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是
一段中文这是一段中文这是一段中文这是一段中文
- <div style="clear:both;">
- </div>
- </div>
2) 效果图 (相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
很容易就出来想要的效果了. 最关键的代码: 对图片进行左浮动就可以了.
遇到的问题
当把中间的文字替换成连续的英文字母时, 出现问题了, 如图
这是因为浏览器默认解析英文或者数字时, 是按照单词进行解析.
也就是说, 每个单词是一个整体, 遇到空间不足时, 不会对单词进行拆分.
所以才会出现上面这种情况.
使用 CSS 属性 Word-break: break-all; 即可解决.
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14925.html