共计 1658 个字符,预计需要花费 5 分钟才能阅读完成。
导读 | Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。 |
我们可以在容器元素添加 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>
不同屏幕的均衡器
在均衡器上通过添加 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 属性添加相同的值。这会一起连接到均衡器容器。重复多次嵌套均衡器,确保他们是匹配的:
实例
<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>
正文完
星哥说事-微信公众号
![post-qrcode](https://www.xgss.net/wp-content/uploads/2023/07/二维码-微信公众号256x256.jpg)