使用 CSS 具有等距 div 的流体宽度

有两种使用 CSS 创建等距“div”元素的方法。

方法一：在 CSS 中使用 Flexbox 技术

方法：我们可以制作一个容器，然后将display属性设置为 flex 。它创建了一个 Flexbox。现在我们可以将 flexbox 属性应用于容器的项目。因此，我们将justify-content属性设置为 space-between以创建相等大小的“div”元素。

句法：

.container {
    display: flex;
    justify-content: space-between;
}

示例 1：以下代码说明了上述概念。

HTML

  

    
    
          
    

  

    

        
Box1
        
Box2
        
Box3
        
Box4
    

  

输出：

使用 flex 属性的等距 div 元素

方法二：在 CSS 中使用 grid 属性

方法：首先我们将容器的显示设置为 grid 。然后使用CSS 的 gap属性创建等距的“div”元素。

句法：

.container {
    display: grid;
    gap: 1rem;
}

示例 2：以下代码说明了上述概念。

HTML

  

    
    
  
    

  

    

        
Box1
        
Box2
        
Box3
        
Box4
    

  

输出：