如何使用 tailwind CSS 左右对齐两个元素？

在本文中，我们将学习如何使用 Tailwind CSS 在文档的左侧和右侧对齐两个 HTML 元素。

您可以使用 Tailwind CSS 轻松地左右浮动元素。这可以使用 tailwind flex或flow-root类来完成。

使用的类：

• flow-root：该类通过添加 flow-root实用程序快速清除容器内的浮动内容。
• position：用于控制定位元素的放置。

方法 1：使用流根实用程序

注：类 升级版本即 v2.0 或更高版本中添加flow-root 在顺风。如果您还没有升级，那么只需在代码中用clearfix替换 flow-root 即可。 clearfix类已被删除，因为flow-root是现代浏览器中相同问题的更简单的解决方案。

句法：

  
    
Welcome to GeeksforGeeks
 
    
A complete portal for geeks

示例 1：添加流根类 到您必须左对齐或右对齐的元素的父级 (div)。

HTML

  

    
  
    

  

    

        GeeksforGeeks
    
      
    Positions using class flow-root
    


      
    

        

            Welcome to GeeksforGeeks 
        
  
        
 
            A complete portal for geeks 
        
    

  

输出：

方法 2：Tailwind CSS Position 类

句法：

    

        Welcome to GeeksforGeeks
    
 
    

        A complete portal for geeks 
    

注意：您可以使用{top|right|bottom|left|inset}-0实用程序将绝对定位的元素锚定在最近定位的父元素的任何边缘上。您还可以使用顶部和底部参数以您想要的方式定位元素。

参数：

• relative：该类用于设置元素相对于文档正常流的位置。
• absolute：该类用于设置元素在文档正常流之外的位置，使相邻元素表现为该元素不存在。
• left-0 ：它将元素定位在屏幕的左侧。
• right-0 ：它将元素定位在屏幕的右侧。
• top-0 ：它将元素定位在屏幕的顶部。
• bottom-0 ：它将元素定位在屏幕的底部。

示例 2：

HTML

  

    
  
    

  

    

        GeeksforGeeks
    
      
    
        Position left and right using 
        relative class
    
    


      
    

        

            Welcome to GeeksforGeeks 
        
  
        

            A complete portal for geeks 
        
    

  

输出：