Foundation 均衡器(Equalizer)

我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。

注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:

实例

	<div class=\"row\" data-equalizer>
  <div class=\"medium-4 columns 
	panel\" data-equalizer-watch>
    Lorem ipsum...
  </div>
  
	<div class=\"medium-4 columns panel\" data-equalizer-watch>

	    Sed ut...
  </div>
  <div class=\"medium-4 columns panel\" 
	data-equalizer-watch>
    Lorem ipsum...
  </div>
</div>

	
<!-- Initialize Foundation JS -->
<script>

	$(document).ready(function() {
    
	$(document).foundation();
})

	</script>

不同屏幕的均衡器

在均衡器上通过添加 data-equalizer-mq=\"value\" 属性为不同屏幕尺寸设置相同高度。值可以是以下之一：

值 描述 实例
medium-up 默认。 创建相同高度的容器，宽度大于 40.063em
large-up 创建相同高度的容器，宽度大于 64.063em
xlarge-up 创建相同高度的容器，宽度大于 90.063em
xxlarge-up 创建相同高度的容器，宽度大于 120.063em

嵌套内容

为 data-equalizer 和 data-equalizer-watch 属性添加相同的值。 这会一起连接到均衡器容器。
重复多次嵌套均衡器，确保他们是匹配的：

实例

	<!-- The Equalized Container -->
<div class=\"row\" data-equalizer=\"first\">
  <div class=\"medium-4 
	columns\">
    <div class=\"panel\" 
	data-equalizer-watch=\"first\">
      
	<h3>Panel</h3>

      <!-- An Equalized 
	Container Inside The Equalized Container -->
      
	<div class=\"row\" data-equalizer=\"second\">
        
	<div class=\"panel\" data-equalizer-watch=\"second\">
          
	<h3>Nested Panel</h3>
          
	<p>Lorem ipsum...</p>
        </div>
        
	<div class=\"panel\" data-equalizer-watch=\"second\">
          
	<h3>Nested Panel</h3>
          
	<p>Lorem ipsum...</p>
        </div>
        
	<div class=\"panel\" data-equalizer-watch=\"second\">
          
	<h3>Nested Panel</h3>
          
	<p>Lorem ipsum...</p>
        </div>
      
	</div>
      <!-- End Nested Equalized Container 
	-->

    </div>
  </div>
  <div 
	class=\"medium-4 columns\">
    <div class=\"panel\" 
	data-equalizer-watch=\"first\">
      
	<h3>Panel</h3>
      <p>Ut enim...</p> 
    
	</div>
  </div>
  <div class=\"medium-4 columns\">
    
	<div class=\"panel\" data-equalizer-watch=\"first\">
      
	<h3>Panel</h3>
      <p>Lorem ipsum....</p>
    
	</div>
  </div>
</div>