【开发小技巧】09—如何使用HTML和CSS将文字环绕在图片上？

最新推荐文章于 2022-12-30 10:48:09 发布

web前端开发V

最新推荐文章于 2022-12-30 10:48:09 发布

阅读量722

点赞数

英文 | https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/?ref=rp

翻译 | web前端开发（ID：web_qdkf）

对于任何类型的网站，在文字周围包裹文字都是很有吸引力的。现在，图像可以具有不同的形状或基本的正方形形状。我们必须用文本包装该图像。

通过使用HTML和CSS，可以在文本上包裹图像，并且有很多方法可以这样做，因为任何图像的形状都不恒定。

包裹文字意味着在图像周围调整/包裹文字。在HTML中，我们可以使图像在文本的右侧，左侧或中心对齐。

在CSS中，除了这些，我们还可以将图像插入圆形或矩形等中，并可以在其周围包裹文字。您还可以根据图像的形状使用CSS shape-outside属性。

以下示例说明了上述方法：

示例1：在此示例中，图像浮动在屏幕的右侧，文本包裹了图像。在此示例中，我们不需要shape-outside属性，因为形状图像是通常的（正方形）。

<!DOCTYPE html> <html>
<head>     <title>         web前端开发：网站：www.webqdkf.com    </title>
    <style>         body {             margin: 20px;             text-align: center;         }         h1 {             color: #19b0cb;         }         img {             float: left;              margin: 5px;         }         p {             text-align: justify;             font-size: 25px;         } </style> </head>
<body>     <h1>web前端开发：网站：www.webqdkf.com</h1>
    <b>         web前端开发：网站：www.webqdkf.com    </b>
    <div class="square">         <div>              <img src=  "web0524.png"                    alt="Longtail boat in Thailand">          </div>
        <p>          web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com          web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com                       </p>     </div> </body> </html>

输出：

示例2：在此示例中，我们将包装不同的形状图像，在这里，我们将使用CSS shape-outside属性以获得更好的观看体验。

<!DOCTYPE html> <html> <head>     <title>          web前端开发公众号，网站：www.webqdkf.com    </title>     <style>         body {             margin: 20px;             text-align:center;         }         h1 {             color:  #19b0cb;         }         .round {             width: 200px;             height: 200px;             border-radius: 50%;             text-align: center;             font-size: 30px;             float: left;             font-weight: bold;             shape-outside: circle();             background-color:  #19b0cb;             color: white;         }               article{             padding-top: 75px;             display: inline-block;         }         p {             text-align: justify;             font-size: 22px;         } </style> </head> <body>     <h1> web前端开发公众号，网站：www.webqdkf.com</h1>
    <b>          web前端开发公众号，网站：www.webqdkf.com    </b>     <div class="round">         <article>web前端开发</article>     </div>     <p>        web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com        web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com          web前端开发公众号，网站：www.webqdkf.com         web前端开发公众号，网站：www.webqdkf.com    </p> </body> </html>

输出：