Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
Foundation CSS Equalizer se utiliza para dar la misma altura a varios elementos. Cuando los elementos tienen diferentes alturas, podemos usar Ecualizador para dar la misma altura a todos los elementos. Equalizer Nesting se utiliza para crear un ecualizador dentro de otro ecualizador. En este artículo, discutiremos el anidamiento del ecualizador CSS básico.
Atributos de anidamiento del ecualizador CSS básico:
- ecualizador de datos: este atributo se agrega al elemento principal para contener los elementos secundarios.
- data-equalizer-watch: este atributo se usa con el elemento secundario para contener la identificación del elemento principal.
Sintaxis:
<div class="grid-x" data-equalizer="equa1">
<div class="cell medium-4"
data-equalizer-watch="equa1">
<div class="callout"
data-equalizer-watch="equa1"
data-equalizer="nest1">
....
</div>
</div>
Ejemplo 1: el siguiente código demuestra el anidamiento del ecualizador CSS de Foundation con algo de texto .
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Equalizer Nesting </title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>
Foundation CSS Equalizer Nesting
</h4>
</center>
<div class="grid-x grid-margin-x align-center"
data-equalizer="outer">
<div class="cell medium-6"
data-equalizer-watch="outer">
<div class="callout"
data-equalizer-watch="outer"
data-equalizer="nest"
data-equalize-on-stack="true">
<h3>
GeeksforGeeks Parent block
</h3>
<div class="callout alert"
data-equalizer-watch="nest">
<p>
Nested block 1:
A Computer Science portal for geeks.
</p>
</div>
<div class="callout secondary"
data-equalizer-watch="nest">
<p>
Nested block 2:
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
<div class="callout success" data-equalizer-watch="nest">
<p>
Nested block 3:
GeeksforGeeks
</p>
</div>
</div>
</div>
<div class="cell medium-6">
<div class="callout panel"
data-equalizer-watch="outer">
<p>
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Anidamiento del ecualizador CSS básico
Ejemplo 2: el siguiente código demuestra el anidamiento del ecualizador CSS de Foundation con imágenes .
HTML
<!DOCTYPE html>
<html>
<head>
<title> Foundation CSS Equalizer Nesting </title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>
Foundation CSS Equalizer Nesting
</h4>
</center>
<div class="grid-x grid-margin-x align-center"
data-equalizer="outer" >
<div class="cell medium-6"
data-equalizer-watch="outer">
<div class="callout secondary"
data-equalizer-watch="outer"
data-equalizer="nest"
data-equalize-on-stack="true" >
<h3>
GeeksforGeeks Parent block
</h3>
<div class="callout alert"
data-equalizer-watch="nest">
<strong> Nested block </strong> <br>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GFG">
</div>
<div class="callout success"
data-equalizer-watch="nest">
<strong> Nested block </strong> <br>
<p>
A Computer Science portal for geeks.
</p>
</div>
<div class="callout warning"
data-equalizer-watch="nest">
<strong> Nested block </strong> <br>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="GFG">
</div>
</div>
</div>
<div class="cell medium-6">
<div class="callout panel secondary"
data-equalizer-watch="outer">
<strong> GeeksforGeeks </strong> <br>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
alt="">
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Anidamiento del ecualizador CSS básico
Referencia: https://get.foundation/sites/docs/equalizer.html#nesting
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA