Égaliseur de fondation
Foundation Equalizer (Equalizer)
Nous pouvons ajouter l'attribut data-equalizer à l'élément conteneur et ajouter l'attribut data-equalizer-watch à chaque élément enfant pour créer un égaliseur de même hauteur. L'élément le plus haut détermine la hauteur des autres éléments.
Remarque : Les curseurs nécessitent JavaScript. Il faut donc initialiser oundation JS :
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>
<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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Égaliseur pour différents écrans
Définissez la même hauteur pour différentes tailles d'écran en ajoutant l'attribut data-equalizer-mq="value" sur l'égaliseur. La valeur peut être l'une des valeurs suivantes :
| value | Description | Exemple | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
moyen-haut |
Créez un conteneur de même hauteur et d'une largeur supérieure à 40,063em | ||||||||||||||||
large-up | Créez un conteneur avec la même hauteur et une largeur supérieure à 64,063em | Essayez-le | |||||||||||||||
xlarge- up | Créez un conteneur avec la même hauteur et une largeur supérieure à 90,063em | Essayez-le | |||||||||||||||
| < code>xxlarge-up | Créez un conteneur avec la même hauteur et une largeur supérieure à 120,063em | Essayez-le |
Contenu imbriquédata-equalizerdata-equalizer-watchAjoutez la même valeur aux attributs
. Celui-ci sera connecté ensemble au conteneur de l’égaliseur.
Répétez les égaliseurs imbriqués plusieurs fois pour vous assurer qu'ils correspondent :
Cliquez sur « Exécuter instance" pour afficher les instances en ligne<🎜><🎜>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>Exécuter l'instance»
