CSS让文字环绕图片显示

最新推荐文章于 2024-06-05 17:20:00 发布

web世界之窗

最新推荐文章于 2024-06-05 17:20:00 发布

阅读量3.9k

点赞数 1

文章标签： css html 前端网页制作 web开发

本文链接：https://blog.csdn.net/weixin_45974707/article/details/103978137

版权

本文介绍了两种CSS方法来实现文字环绕图片显示：1) 使用img的align属性设置图片停靠位置；2) 为img添加div容器，设置css属性float:left和clear:both，以及align属性为'center'。

摘要由CSDN通过智能技术生成

总得来说，文字环绕图片显示的实现方式有这样两种：

通过img的 align 属性，设置img的停靠位置，文字会环绕显示；
给img单独加一个父级div容器，设置css属性：float:left ; clear:both 设置align属性：align=‘center’

第一种：通过img的 align 属性，设置img的停靠位置，文字会环绕显示:

<body>
<div class="example-container">
    <img id="example-element" align='left' class="transition-all" src="../assets/round-balloon.png" width="150"> " We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic
    young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the se