Foundation 均衡器(Equalizer)
Foundation 均衡器(Equalizer)
不同屏幕的均衡器
嵌套内容
我们可以在容器元素添加 data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:
实例
Lorem ipsum...
Sed ut...
Lorem ipsum...
$(document).ready(function() {
$(document).foundation();
})
不同屏幕的均衡器
在均衡器上通过添加 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 属性添加相同的值。 这会一起连接到均衡器容器。
重复多次嵌套均衡器，确保他们是匹配的：
Panel
Nested Panel
Lorem ipsum...
Nested Panel
Lorem ipsum...
Nested Panel
Lorem ipsum...
Panel
Ut enim...
Panel
Lorem ipsum....
相关文章
Anne
2020-11-24
Fawn
2020-01-20
Kenda
2020-06-11
Lana
2020-06-18
Tricia
2020-12-27
Sophia
2020-05-09
Obelia
2020-05-28
Bertha
2020-12-20
Caroline
2020-06-02
Jill
2020-10-19
Dior
2020-12-19
An
2021-03-22
Judith
2020-11-17
Lecea
2020-03-24
Kita
2020-01-26
Shanon
2020-11-18
Faye
2020-11-30
Orenda
2020-06-16