【开发小技巧】016—如何使用HTML和CSS将文字环绕在图片周围？-优快云博客

本文介绍如何使用HTML和CSS实现图片与文字的排版设计，包括图片的左右对齐、圆形图片排版及文本环绕效果，提升网站吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者 | web前端开发（ID：web_qdkf)

对于任何类型的网站，纯文字的网页是很难有吸引力的。现在，将图片与文字的排版设计，可以提升网站的吸引力。图片可以是不同的形状，基本是正方形图片居多。

在图像周围放置文字。通过使用HTML和CSS，可以在文本周围放置图像，并且有很多方法实现。

图片被文字包围着，在HTML中，我们可以使图像在文本的右侧，左侧或中心对齐。在CSS中，除了这些，我们还可以将图像插入圆形或矩形等中，并可以在其周围包裹文本。你还可以根据图像的形状使用CSS shape-outside属性。

通过以下示例来实现上述方法：

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

<!DOCTYPE html> <html>
<head>     <title>         web前端开发    </title>
    <style>         body {             margin: 20px;             text-align: center;         }         h1 {             color: #00a6bc;         }         img {             float: left;              margin: 5px;         }         p {             text-align: justify;             font-size: 25px;         } </style> </head>
<body>     <h1>web前端开发</h1>
    <b>        web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a>    </b>
    <div class="square">         <div>              <img src=  "http://www.webqdkf.com/skin/default/images/logo.jpg"                    alt="Longtail boat in Thailand">          </div>
        <p>            主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a>        </p>     </div> </body>
</html>

最终效果如下：

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

<!DOCTYPE html> <html>   <head>     <title>         web前端开发    </title>           <style>         body {             margin: 20px;             text-align:center;         }         h1 {             color:  #00a6bc;         }             .round {             width: 200px;             height: 200px;             border-radius: 50%;             text-align: center;             font-size: 30px;             float: left;             font-weight: bold;                                      shape-outside: circle();             background-color: #00a6bc;             color: white;         }                   article{             padding-top: 75px;             display: inline-block;         }                   p {             text-align: justify;             font-size: 22px;         } </style> </head>   <body>     <h1>web前端开发</h1>           <b>         web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a>    </b>       <div class="round">         <article>web前端开发</article>     </div>           <p>          主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a> 主要专注于前端开发技术领域(Html,Css,Js,Jq,Html5,Css3,Dart等)技能学习与技术研究，以及同行经验交流，前端开发学习资源的分享。我们提倡终身学习，在这里你可以与一群具有终身学习精神的有趣程序员交流。我们坚持每天学习一点点，每天进步一点点，人生进步一大步！关注我们，与我们一起学习进步。web前端学习网：<a href="http://www.webqdkf.com">www.webqdkf.com</a>    </p> </body> 
</html>

最终效果如下：