二维码
意见反馈

Foundation 均衡器

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

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation 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-equalizerdata-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>
亲自试一试