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 >
< 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 >
< 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 >
尝试一下 »