# 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> ```