免費AI編程助手
Foundation 均衡器
2022-08-05 15:42 更新
我們可以在容器元素添加 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>
<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" 屬性為不同屏幕尺寸設(shè)置相同高度。值可以是以下之一：
| 值 | 描述 | 實例 |
|---|---|---|
medium-up
|
默認(rèn)。 創(chuàng)建相同高度的容器，寬度大于 40.063em | |
large-up
|
創(chuàng)建相同高度的容器，寬度大于 64.063em | 嘗試一下 |
xlarge-up
|
創(chuàng)建相同高度的容器，寬度大于 90.063em | 嘗試一下 |
xxlarge-up
|
創(chuàng)建相同高度的容器，寬度大于 120.063em | 嘗試一下 |
嵌套內(nèi)容
為 data-equalizer 和 data-equalizer-watch 屬性添加相同的值。 這會一起連接到均衡器容器。重復(fù)多次嵌套均衡器，確保他們是匹配的：
實例
<!-- 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>
嘗試一下 ?
以上內(nèi)容是否對您有幫助：
更多建議：