基础 CSS 厨房水槽均衡器

Foundation CSS是流行的前端框架之一。它可以帮助开发人员非常轻松地向他们的网站添加复杂的组件。它使我们能够向网站添加各种高级组件，如手风琴、面包屑、按钮等。因此，使网站更专业的使用，也使其用户友好。

Kitchen Sink是 Foundation CSS 中的一个页面，其中列出了所有主要组件及其代码。它包含每个组件的所有基本模板及其代码。在本文中，我们将了解 Foundation CSS 的 Kitchen Sink 页面中的均衡器组件。 Equalizer组件在现代网站中非常有用，我们需要使不同的组件在网站中以垂直或水平顺序排列时高度相等。

基础 CSS 均衡器数据属性：

• data-equalizer：该属性被添加到包含将被均衡的子元素的父容器组件。
• data-equalize-on：此属性保存元素应均衡的屏幕尺寸值。它可以分别具有小、大和中等值。它被添加到父组件中。
• data-equalizer-watch：这个属性被添加到子元素中。它包含父均衡器 ID 的值。
• data-equalize-by-row：此属性在按行分布元素时非常有用。
• data-equalize-on-stack：此属性在连续堆叠时启用元素的高度均衡。

注意：均衡器组件不需要任何特定的类。

句法：

    

        

            ...
        
    
    ...

示例 1：在此示例中，我们有 4 列不同大小的图像和文本，我们希望它们在水平放置在网站上时具有相同的高度。

HTML

  

    Foundation CSS Kitchen Sink Equalizer
    

  

    Foundation CSS Equalizer
    GeeksForGeeks
    
        
            
                
            
        
        
            
                
            
        
        
            
                
                This article in on the Equalizer
                   Component of Foundation CSS. It 
                   is published in GeeksforGeeks
                   Platform.
  
            
        
        
            
                This article in on the Equalizer
                   Component of Foundation CSS. It is
                   published in GeeksforGeeks
                   Platform.
  
            
        
    
    
    
    
    
    
        $(document).foundation();
    

  

输出：

示例 2：在此示例中， 我们有 2 行，其中第一列有 3 行，第二列分别有 4 行，我们使用 Kitchen Sink Equalizer 属性将它们堆叠在相等的高度。

HTML

  

    Foundation CSS Kitchen Sink Equalizer
    

  

    Foundation CSS Equalizer
    GeeksForGeeks
    
        
            
                
                    First Column
                    
                        This article in on the Equalizer Component 
                            of Foundation CSS. It is published in
                            GeeksforGeeks Platform.This article in
                            on the Equalizer Component of Foundation CSS.
                            It is published in GeeksforGeeks Platform
                        
  
                    
                    
                        This article in on the Equalizer Component of
                           Foundation CSS. It is published in GeeksforGeeks 
                           Platform
                        
  
                    
                
            
            
                
                    Second Column
                    
                        This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform.This article in on 
                           the Equalizer Component of Foundation CSS.
                           It is published in GeeksforGeeks Platform
                        
  
                    
                    
                        This article in on the Equalizer Component of
                           Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        
  
                    
                    
                        This article in on the Equalizer Component
                           of Foundation CSS. It is published in
                           GeeksforGeeks Platform
                        
  
                    
                
            
        
    
    
    
    
    
    
        $(document).foundation();
    

  

输出：

基础 CSS 厨房水槽均衡器

参考： https ://get.foundation/sites/docs/kitchen-sink.html#equalizer