Latest web development tutorials

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 >

嘗試一下»