在 Foundation 框架中，均衡器（Equalizer） 组件用于使同一容器内的多个元素具有相同的高度，通常用于面板、卡片等布局，以确保它们在视觉上对齐。

基本用法：

  1. HTML 结构： 在容器元素上添加 data-equalizer 属性，并在每个子元素上添加 data-equalizer-watch 属性。 <div class="row" data-equalizer> <div class="medium-4 columns panel" data-equalizer-watch> <!-- 内容 --> </div> <div class="medium-4 columns panel" data-equalizer-watch> <!-- 内容 --> </div> <div class="medium-4 columns panel" data-equalizer-watch> <!-- 内容 --> </div> </div>
  2. 初始化 JavaScript： 确保在页面加载完成后初始化 Foundation 的 JavaScript。 <script> $(document).ready(function() { $(document).foundation(); }); </script>

不同屏幕尺寸的均衡器：

您可以通过在 data-equalizer 上添加 data-equalizer-mq 属性，为不同屏幕尺寸设置相同高度。 例如：

<div class="row" data-equalizer data-equalizer-mq="medium-up">
  <!-- 内容 -->
</div>

data-equalizer-mq 的值可以是以下之一：

  • medium-up：宽度大于 40.063em
  • large-up：宽度大于 64.063em
  • xlarge-up：宽度大于 90.063em
  • xxlarge-up：宽度大于 120.063em

嵌套均衡器：

如果需要在均衡器内嵌套另一个均衡器，确保为每个均衡器的 data-equalizer 和 data-equalizer-watch 属性添加相同的值，以便它们正确关联。

<div class="row" data-equalizer="first">
  <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>内容...</p>
        </div>
        <!-- 更多嵌套面板 -->
      </div>
    </div>
  </div>
  <!-- 更多列 -->
</div>

注意事项：

  • 均衡器需要使用 JavaScript，因此需要初始化 Foundation 的 JavaScript。
  • 在使用均衡器时，确保为每个均衡器和其子元素的 data-equalizer 和 data-equalizer-watch 属性添加相同的值，以确保它们正确关联。

有关更多信息和示例，请参阅 Foundation 官方文档中的均衡器部分。 citeturn0search0