📜  语义 UI 图像浮动变体

📅  最后修改于: 2022-05-13 01:56:12.250000             🧑  作者: Mango

语义 UI 图像浮动变体

Semantic UI 是一个开源开发框架,它提供预定义的类,使我们的网站看起来漂亮、令人惊叹且响应迅速。它类似于具有预定义类的 Bootstrap。它使用 jQuery 和 CSS 来创建接口。它也可以像 bootstrap 一样通过 CDN 直接使用。

使用语义 UI 在我们的网站上放置图像有不同的风格,使我们的网站看起来更棒。 Semantic-UI Image Floated Variations 用于将图像放置在其他 Web 内容的左侧或右侧。

语义 UI 图像浮动变体类:

  • 左浮动:用于将图像放置在内容的左侧。
  • 右浮动:用于将图像放置在内容的右侧。

句法:

Text Content...

示例 1:在此示例中,我们将使用 Image Floated Variations 在左侧和右侧浮动图像。

HTML


  

    
        Semantic-UI Image Floated Variations
    
  
    

  

    
        

            GeeksforGeeks         

           

Semantic-UI Image Floated Variations

                    
             
  


HTML


  

    
        Semantic-UI Image Floated Variations
    
  
    
  

  

    
        

            GeeksforGeeks         

           

Semantic-UI Image Floated Variations

    
       
                 

            Web Technology refers to the various tools and             techniques that are utilized in the process of             communication between different types of devices             over the internet. A web browser is used to             access web pages. Web browsers can be defined             as programs that display text, data, pictures,             animation, and video on the Internet.             Hyperlinked resources on the World Wide Web             can be accessed using software interfaces             provided by Web browsers.         

        

                            

            Web Technology refers to the various tools and             techniques that are utilized in the process of             communication between different types of devices             over the internet. A web browser is used to             access web pages. Web browsers can be defined             as programs that display text, data, pictures,             animation, and video on the Internet.             Hyperlinked resources on the World Wide Web             can be accessed using software interfaces             provided by Web browsers.         

    
  


输出:

示例 2:在此示例中,我们将使用带有文本内容的 Image Floated Variations 来使图像在左侧和右侧浮动。

HTML



  

    
        Semantic-UI Image Floated Variations
    
  
    
  

  

    
        

            GeeksforGeeks         

           

Semantic-UI Image Floated Variations

    
       
                 

            Web Technology refers to the various tools and             techniques that are utilized in the process of             communication between different types of devices             over the internet. A web browser is used to             access web pages. Web browsers can be defined             as programs that display text, data, pictures,             animation, and video on the Internet.             Hyperlinked resources on the World Wide Web             can be accessed using software interfaces             provided by Web browsers.         

        

                            

            Web Technology refers to the various tools and             techniques that are utilized in the process of             communication between different types of devices             over the internet. A web browser is used to             access web pages. Web browsers can be defined             as programs that display text, data, pictures,             animation, and video on the Internet.             Hyperlinked resources on the World Wide Web             can be accessed using software interfaces             provided by Web browsers.         

    
  

输出:

参考: https://semantic-ui.com/elements/image.html#floated