本文本家儿要介绍html若何搭配CSS实现文字环抱图片， 即文字绕排的结果 。
需要这些哦
Chrome
Notepad++
方式/
1筹办一张图片， 新建一个空白html文件
文章插图
2此中html文件内容如下图所示， html中包含了一张图片， 及对应的描述段落
文章插图
3给html添加head标签， 在标签中界说样式 。
<style>
p {border:1px solid red;}
img {float:left; margin:0 5px 5px 0;}
【html+css如何实现文字环绕图片的效果】</style>
文章插图
4用chrome浏览器打开上面的html文件， 可以看到文字绕排结果， 如下图所示
文章插图
5因为在引入图片时我们用到的语句是<img src=https://vvvtt.com/article/"Penguins.jpg" style="width: 50%;height:auto"/>， 这表白图片的大小是会跟着浏览器窗口的大小调整而主动调整的 。 所以当放年夜或缩小浏览器窗口时， 环抱结果会跟从着转变 。
文章插图
文章插图
6若是要断根文字绕排结果， 只需将float: letf样式界说删除即可 。
文章插图
文章插图
注重事项若是小编所写经验帮忙到了你， 请帮手给点个赞或评论撑持下， 您的承认是作者继续创作的动力！
以上内容就是html+css如何实现文字环绕图片的效果的内容啦， 希望对你有所帮助哦！
推荐阅读
- 技术：[2]如何打开/关闭mysql服务
- 自行车 发现汪星人如何获得交通工具
- 三国如龙传手游空间如何添加标签
- 在海岛奇兵里面如何获得第二个英雄
- 蚂蚁森林时光加速器如何使用 有什么效果
- 网页版京东如何解绑银行卡 在电脑上操作
- 干啥想偷看手机滚动态壁纸如何设置
- 今日头条极速版如何清除缓存
- 如何查看自己办理的财智金还款计划
- 移动用户如何自助开启短信炸弹防护