亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

personnages

Foundation 均衡器(Equalizer)

我們可以在容器元素添加 data-equalizer 屬性，并為每個子元素添加 data-equalizer-watch 屬性來創(chuàng)建一個相同高度的均衡器。最高的元素決定了其他元素的高度。

注意: 滑塊需要使用 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 默認。 創(chuàng)建相同高度的容器，寬度大于 40.063em
large-up 創(chuàng)建相同高度的容器，寬度大于 64.063em 實例預覽
xlarge-up 創(chuàng)建相同高度的容器，寬度大于 90.063em 實例預覽
xxlarge-up 創(chuàng)建相同高度的容器，寬度大于 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>
實例預覽 ?


關于我們 聯(lián)系我們 留言板

手冊網

Article précédent： Article suivant：