파운데이션 이퀄라이저
Foundation Equalizer(Equalizer)
컨테이너 요소에 data-equalizer 속성을 추가하고 각 하위 요소에 data-equalizer-watch 속성을 추가하여 생성할 수 있습니다. 동일한 높이의 이퀄라이저입니다. 가장 높은 요소가 다른 요소의 높이를 결정합니다. data-equalizer 属性，并为每个子元素添加 data-equalizer-watch 属性来创建一个相同高度的均衡器。最高的元素决定了其他元素的高度。
注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:
实例
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</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中文网 -- php中文网！！</p>
<p>php中文网 -- php中文网！！</p>
<p><strong>我是最高的元素。其他元素使用我的搞定。</strong></p>
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
<p>php中文网 -- php中文网！！</p>
<p>php中文网 -- php中文网！！</p>
</div>
<div class="medium-4 columns panel" data-equalizer-watch>
<p>php中文网 -- php中文网！！</p>
</div>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
不同屏幕的均衡器
在均衡器上通过添加 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
Instance
Run Instance»온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요.
🎜<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</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>内嵌均衡器</h2>
<p>一个均衡容器内嵌入另一个均衡容器:</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>内嵌面板</h3>
p>php中文网 -- php中文网！！</p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>内嵌面板</h3>
<p>php中文网 -- php中文网！！</p>
</div>
<div class="panel" data-equalizer-watch="second">
<h3>内嵌面板</h3>
<p>php中文网 -- php中文网！！</p>
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>面板</h3>
<p>php中文网 -- php中文网！！</p>
<p>php中文网 -- php中文网！！</p>
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="first">
<h3>面板</h3>
<p>php中文网 -- php中文网！！</p>
</div>
</div>
</div>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</body>
</html>Run Instance»온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요.
다른 화면에 대한 이퀄라이저🎜🎜이퀄라이저에 추가 < code>data-equalizer-mq="value" 속성은 다양한 화면 크기에 대해 동일한 높이를 설정합니다. 값은 다음 중 하나일 수 있습니다. 🎜
| value | 설명 | 예 |
|---|---|---|
중형 | 기본값. 높이가 같고 너비가 40.063em보다 큰 컨테이너를 만듭니다. | 🎜 |
대형 | 높이는 같고 너비는 64.063em보다 큰 컨테이너를 만듭니다. | 해 보세요 |
xlarge-up | 높이는 같고 너비는 90.063em보다 큰 컨테이너를 만듭니다. | 해 보세요 |
xxlarge-up | 높이는 같고 너비는 120.063em보다 큰 컨테이너를 만듭니다. | 사용해 보기 |
