CSS让文字环绕图片显示

最新推荐文章于 2024-04-09 19:34:35 发布

web世界之窗

最新推荐文章于 2024-04-09 19:34:35 发布

阅读量3.7k

点赞数 1

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

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

版权

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

通过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 sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth."
</div>
<style>
 .example-container { 
    height: auto; 
    width: 500px; 
    margin: auto; 
    border: 1px solid green; }
</style>
</body>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

第二种：给img单独加一个div容器，设置css属性：float:left ; clear:both 设置align属性：align=‘center’

<body>
    <div class="example-container">
        <div align="center" style="float:left; clear:both">
            <img id="example-element" class="transition-all" width="150" src="../assets/round-balloon.png">
        </div>
        " 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 sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth."
    </div>
    <style>
        .example-container {
        height: auto;
        width: 500px;
        margin: auto;
        border: 1px solid green;
    }
    </style>
</body>

web世界之窗

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS让文字环绕图片显示

总得来说，文字环绕图片显示的实现方式有这样两种：通过img的 align 属性，设置img的停靠位置，文字会环绕显示；给img单独加一个父级div容器，设置css属性：float:left ; clear:both 设置align属性：align=‘center’第一种：通过img的 align 属性，设置img的停靠位置，文字会环绕显示:<body><div...
复制链接

扫一扫