如何使用 HTML 和 CSS 在图像周围环绕文本？

将文本环绕在图像周围对于任何类型的网站都非常有吸引力。现在图像可以是不同的形状或基本的方形。我们必须用文本包裹该图像。通过使用 HTML 和 CSS 可以用文本包裹图像，并且有很多方法可以做到这一点，因为任何图像的形状都不是恒定的。环绕文本意味着在图像周围调整/环绕文本。在 HTML 中，我们可以将图像对齐到文本的右侧、左侧或居中。在CSS中，除此之外，我们还可以将图像插入圆形或矩形等中，并可以在其周围环绕文本。您还可以根据图像的形状使用 CSS shape-outside 属性。
下面的例子说明了上述方法：
示例 1：在此示例中，图像浮动在屏幕右侧，文本环绕图像。在这个例子中，我们不需要 shape-outside 属性，因为形状图像是普通的（正方形）。

html

  

    
      
    

  

    
GeeksforGeeks
      
    
        A Computer Science
        Portal for Geeks
    
      
    

        
 
             
        
          
          

            How many times were you frustrated while looking
            out for a good collection of programming/algorithm
            /interview questions? What did you expect and what
            did you get? This portal has been created to
            provide well written, well thought and well
            explained solutions for selected questions.
            An IIT Roorkee alumnus and founder of GeeksforGeeks.
            He loves to solve programming problems in most
            efficient ways. Apart from GeeksforGeeks, he has
            worked with DE Shaw and Co. as a software developer 
            and JIIT Noida as an assistant professor. It is a
            good platform to learn programming. It is an
            educational website. Prepare for the Recruitment
            drive of product based companies like Microsoft,
            Amazon, Adobe etc with a free online placement
            preparation course.
        
  
    

  

输出：

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

html

  

    
      
    

  

    
GeeksforGeeks
      
    
        A Computer Science Portal for Geeks
    
  
    

        
GeeksforGeeks
    
      
      

        How many times were you frustrated while looking
        out for a good collection of programming/
        algorithm/ interview questions? What did you
        expect and what did you get? This portal has been
        created to provide well written, well thought and
        well explained solutions for selected questions.
        An IIT Roorkee alumnus and founder of
        GeeksforGeeks. He loves to solve programming
        problems in most efficient ways. Apart from
        GeeksforGeeks, he has worked with DE Shaw and
        Co. as a software developer and JIIT Noida as
        an assistant professor. It is a good platform
        to learn programming. It is an educational
        website. Prepare for the Recruitment drive of
        product    based companies like Microsoft, Amazon,
        Adobe etc with a free online placement
        preparation course.
    
  

  

输出：

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。

CSS 是网页的基础，用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。