后浪云Foundation教程：Foundation 均衡器(Equalizer)
Foundation 均衡器(Equalizer)
我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 均衡器需要使用 JavaScript，所以你需要初始化 Foundation 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
>
尝试一下 »