# 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-equalizer` 和 `data-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> ```