手册

Foundation 5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation Magellan Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 均衡器

阅读22184

更新时间2022-04-14

Foundation Joyride

Foundation 均衡器(Equalizer)

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

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

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div class="row" data-equalizer>
  <h2>Foundation 均衡器(</h2>
  <p>相等高度容器:</p>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
      <p>php中文网 --  php中文网！！</p>  
      <p><strong>我是最高的元素。其他元素使用我的搞定。</strong></p> 
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
      <p>php中文网 --  php中文网！！</p>  
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
      <p>php中文网 --  php中文网！！</p>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

不同屏幕的均衡器

在均衡器上通过添加 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 属性添加相同的值。这会一起连接到均衡器容器。重复多次嵌套均衡器，确保他们是匹配的：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row" data-equalizer="first">
  <h2>内嵌均衡器</h2>
  <p>一个均衡容器内嵌入另一个均衡容器:</p>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
    <div class="row" data-equalizer="second">
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
         p>php中文网 --  php中文网！！</p>
      </div>
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
        <p>php中文网 --  php中文网！！</p>
      </div>
      <div class="panel" data-equalizer-watch="second">
        <h3>内嵌面板</h3>
        <p>php中文网 --  php中文网！！</p>
      </div>
    </div>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
       <p>php中文网 --  php中文网！！</p>
       <p>php中文网 --  php中文网！！</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
    <h3>面板</h3>
       <p>php中文网 --  php中文网！！</p>
    </div>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Foundation Joyride