实现文字环绕

最新推荐文章于 2024-04-22 20:07:06 发布

妙趣前端

最新推荐文章于 2024-04-22 20:07:06 发布

阅读量1k

点赞数 2

分类专栏： web CSS 干货文章标签： html css

本文链接：https://blog.csdn.net/qq_45768871/article/details/112760606

版权

web 同时被 3 个专栏收录

84 篇文章 4 订阅

订阅专栏

干货

40 篇文章 1 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

实现文字环绕

要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            margin: 0 auto;
            width: 50%;
            margin-top: 80px;
        }
        
        img.left {
            border-radius: 100%;
            float: left;
            shape-outside: circle();
            margin: 35px 25px 25px 0;
        }
        
        img.right {
            border-radius: 100%;
            float: right;
        }
    </style>
</head>

<body>
    <p>《程序员修炼之道（从小工到专家）》
        <img class="left" src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J1bGVfZGF6ZQ==,size_16,color_FFFFFF,t_70" width="200px" /> 第一章 · 注重实效的哲学
        注重实效的程序员能够越出直接的问题去思考，总是设法把问题放在更大的语境中，总是设法注意更大的图景。 关心你的技艺。 思考！你的工作。1. 我的源码让猫给吃了 对你的职业生涯负责，并且不害怕承认无知或错误。 当你犯错误、或是判断失误时，诚实地承认它，并设法给出各种选择。不要责备别人或别的东西，或是拼凑借口。 2. 软件的熵 不要容忍破窗户。 不要留着“破窗户”（低劣的设计、错误决策、或是糟糕的代码）不修，发现一个就修一个。 如果没有足够的时间进行适当的修理，就用木板把它定起来（或许你可以把出问题的代码放入注释，或是显示“未实现”消息，或是用虚设的数据加以替代）。
        如果你发现你的团队和项目的代码十分漂亮——编写整洁、设计良好，并且很优雅——你就很可能会格外注意不去把它弄脏。 </p>

    <p>《程序员修炼之道（从小工到专家）》
        <img class="right" src="https://img-blog.csdnimg.cn/20200512093847525.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J1bGVfZGF6ZQ==,size_16,color_FFFFFF,t_70" width="200px" /> 第一章 · 注重实效的哲学
        注重实效的程序员能够越出直接的问题去思考，总是设法把问题放在更大的语境中，总是设法注意更大的图景。 关心你的技艺。 思考！你的工作。1. 我的源码让猫给吃了 对你的职业生涯负责，并且不害怕承认无知或错误。 当你犯错误、或是判断失误时，诚实地承认它，并设法给出各种选择。不要责备别人或别的东西，或是拼凑借口。 2. 软件的熵 不要容忍破窗户。 不要留着“破窗户”（低劣的设计、错误决策、或是糟糕的代码）不修，发现一个就修一个。 如果没有足够的时间进行适当的修理，就用木板把它定起来（或许你可以把出问题的代码放入注释，或是显示“未实现”消息，或是用虚设的数据加以替代）。
    </p>
</body>

</html>

在这里插入图片描述

妙趣前端

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
实现文字环绕

实现文字环绕要想让文字环绕在图片的周围，让图片 float 就可以了；如果还想要实现文字圆形环绕图片的效果，可以使用 shape-outside: circle(); 属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫