Foundation Equalizer 均衡器 - 学习 Foundation 5

创建一个相同高度的均衡器很简单，只要在容器元素添加 data-equalizer 属性并为每个子元素添加 data-equalizer-watch 属性来创建一个

最高的元素决定了其它元素的高度

均衡器需要初始化 Foundation JS

<div class="row" data-equalizer>
    <div class="medium-4 columns panel" data-equalizer-watch>
        <p>简单教程...</p>
    </div>
    <div class="medium-4 columns panel" data-equalizer-watch>
        <p>简单教程</p>
        <p>简单编程</p>
        <p>www.twle.cn</p>
    </div>
    <div class="medium-4 columns panel" data-equalizer-watch>
        <p>简单教程</p>
        <p>简单编程</p>
    </div>
</div>
<script>
$(document).ready(function() {$(document).foundation();})
</script>

运行范例 »

不同屏幕大小的均衡器

在均衡器上通过添加 data-equalizer-mq="value"属性为不同屏幕尺寸设置相同高度

value 值可以是以下之一

值	描述	范例
medium-up	创建相同高度的容器，宽度大于 40.063 em 。默认	运行范例 »
large-up	创建相同高度的容器，宽度大于 64.063 em	运行范例 »
xlarge-up	创建相同高度的容器，宽度大于 90.063 em	运行范例 »
xxlarge-up	创建相同高度的容器，宽度大于 120.063 em	运行范例 »

嵌套内容

可以为 data-equalizer 和 data-equalizer-watch 属性添加相同的值，让它们一起连接到均衡器容器

重复多次嵌套均衡器，需要确保它们是匹配的

<div class="row" data-equalizer="first">
    <div class="medium-4 columns">
        <div class="panel" data-equalizer-watch="first">      
            <h3>Panel</h3>     
            <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>
        </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>

运行范例 »