📌  相关文章
📜  如何使用 HTML 和 CSS 在图像周围环绕文本?

📅  最后修改于: 2021-09-01 02:20:04             🧑  作者: Mango

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

html


 

    
        Wrapping an Image with the text
    
     
    

 

    

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.         

      
 


html


 

    
        Wrapping an Image with the text
    
     
    

 

    

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.     

   


输出:

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

html



 

    
        Wrapping an Image with the text
    
     
    

 

    

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.     

   

输出: