Foundation 中文手册
/Foundation 均衡器
Foundation 均衡器
Foundation 均衡器(Equalizer)
我们可以在容器元素添加data-equalizer
属性,并为每个子元素添加data-equalizer-watch
属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意:滑块需要使用 JavaScript。所以你需要初始化 oundation JS:
实例
Foundation 实例 Foundation 均衡器(
相等高度容器:
php中文网 -- php中文网!!
php中文网 -- php中文网!!
我是最高的元素。其他元素使用我的搞定。
php中文网 -- php中文网!!
php中文网 -- php中文网!!
php中文网 -- php中文网!!
运行实例 »
点击 "运行实例" 按钮查看在线实例
不同屏幕的均衡器
在均衡器上通过添加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
属性添加相同的值。 这会一起连接到均衡器容器。 重复多次嵌套均衡器,确保他们是匹配的:
实例
Foundation 实例 内嵌均衡器
一个均衡容器内嵌入另一个均衡容器:
面板
内嵌面板
p>php中文网 -- php中文网!!内嵌面板
php中文网 -- php中文网!!
内嵌面板
php中文网 -- php中文网!!
面板
php中文网 -- php中文网!!
php中文网 -- php中文网!!
面板
php中文网 -- php中文网!!
运行实例 »
点击 "运行实例" 按钮查看在线实例