小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
 

Foundation 均衡器(Equalizer)


我们可以在容器元素添加 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 >

尝试一下 »