阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 均衡器(Equalizer)

    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-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>
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录