?? ??? ???
/ Foundation 均衡器
Foundation 均衡器
Foundation 均衡器(Equalizer)
我們可以在容器元素添加 data-equalizer 屬性，并為每個(gè)子元素添加 data-equalizer-watch 屬性來(lái)創(chuàng)建一個(gè)相同高度的均衡器。最高的元素決定了其他元素的高度。
注意: 滑塊需要使用 JavaScript。所以你需要初始化 oundation JS:
實(shí)例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row" data-equalizer>
<h2>Foundation 均衡器(</h2>
<p>相等高度容器:</p>
<div class="medium-4 columns panel" data-equalizer-watch>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
<p><strong>我是最高的元素。其他元素使用我的搞定。</strong></p>
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
</div>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
不同屏幕的均衡器
在均衡器上通過添加 data-equalizer-mq="value" 屬性為不同屏幕尺寸設(shè)置相同高度。值可以是以下之一：
| 值 | 描述 | 實(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 屬性添加相同的值。 這會(huì)一起連接到均衡器容器。
重復(fù)多次嵌套均衡器，確保他們是匹配的：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 實(shí)例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row" data-equalizer="first">
<h2>內(nèi)嵌均衡器</h2>
<p>一個(gè)均衡容器內(nèi)嵌入另一個(gè)均衡容器:</p>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>面板</h3>
<div class="row" data-equalizer="second">
<div class="panel" data-equalizer-watch="second">
<h3>內(nèi)嵌面板</h3>
p>php中文網(wǎng) -- php中文網(wǎng)?。?lt;/p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>內(nèi)嵌面板</h3>
<p>php中文網(wǎng) -- php中文網(wǎng)?。?lt;/p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>內(nèi)嵌面板</h3>
<p>php中文網(wǎng) -- php中文網(wǎng)?。?lt;/p>
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>面板</h3>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>面板</h3>
<p>php中文網(wǎng) -- php中文網(wǎng)??！</p>
</div>
</div>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例