Foundation 均衡器

2022-08-05 15:42 更新

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

尝试一下 »
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号