Fundación CSS
El componente Ecualizador ayuda a crear múltiples elementos del sitio web de la misma altura. En los navegadores modernos, a veces los elementos no tienen la misma altura, como se muestra a continuación:
Por lo tanto, esto hace que el sitio web se vea feo. Este tipo de problema se puede resolver fácilmente utilizando el componente Ecualizador de Foundation CSS al igualar la altura de las tres columnas.
Atributos básicos del ecualizador CSS:
- ecualizador de datos: este atributo se agrega al componente contenedor principal que contiene los elementos secundarios que se igualarán.
- data-equalize-on: este atributo contiene el valor del tamaño de pantalla para el cual se igualarán los elementos. Puede tener valores como pequeño, grande y mediano respectivamente. Se agrega al componente padre.
- data-equalizer-watch: este atributo se agrega a los elementos secundarios. Contiene el valor de la identificación del ecualizador principal.
- data-equalize-by-row: Este atributo es muy útil para distribuir elementos en filas.
- data-equalize-on-stack: este atributo permite la ecualización de la altura de los elementos cuando se apilan en una fila.
Clase de ecualizador CSS básico:
- grid-container: Esta clase nos ayuda a centrar la grilla en la pantalla con margen y relleno en ambos lados.
- grid-x: esta clase hace que la cuadrícula se organice en el eje x.
- grid-margin-x: esta clase ayuda a dar margen a los elementos de la cuadrícula a lo largo del eje x.
- celda: Esta clase se utiliza para identificar cada uno de los elementos dentro de la cuadrícula que necesita organizar.
- medium-4: esta clase es una clase de consulta de medios de Foundation CSS. Esta clase hace que un elemento tenga un ancho de cuatro columnas en una pantalla mediana.
Sintaxis:
<div class="grid-x grid-margin-x"
data-equalizer="equalizer1"
data-equalize-on="medium">
<div class="cell medium-4">
<div data-equalizer-watch="equalizer1">
...
</div>
</div>
</div>
Ejemplo 1: En este ejemplo, agregamos el ecualizador para igualar las tres celdas de la cuadrícula para que tengan la misma altura, independientemente de que contengan imágenes y texto de tamaño variable.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Equalizer <title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" crossorigin="anonymous"> </script> <title> Foundation CSS Equalizer </title> </head> <body> <h2 style="color: green;">GeeksforGeeks</h2> <h4>Foundation CSS Equalizer</h4> <div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq"> <div class="cell medium-4"> <div class="callout" data-equalizer-watch> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220305173028/starts-300x218.png"> </div> </div> <div class="cell medium-4"> <div class="callout" data-equalizer-watch> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220302090848/star5.png"> </div> </div> <div class="cell medium-4"> <div class="callout" data-equalizer-watch> <p> This article in on the Equalizer Component of Foundation CSS. It is published in GeeksforGeeks Platform. </p> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: En el ejemplo, hemos utilizado un ecualizador anidado para igualar el contenido dentro de una de las casillas de la cuadrícula del contenedor. Hemos utilizado el atributo «data-equalize-on-stack».
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Equalizer <title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" crossorigin="anonymous"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js" crossorigin="anonymous"> </script> <title> Foundation CSS Equalizer </title> </head> <body> <h2 style="color: green;">GeeksforGeeks</h2> <h4>Foundation CSS Nested Equalizer</h4> <div class="grid-container"> <div class="grid-x grid-margin-x" data-equalize-on="medium" data-equalizer="parent"> <div class="cell medium-4"> <div class="callout" data-equalizer-watch="parent" data-equalizer="block1" data-equalize-on-stack="true"> <h3>The block with nested blocks</h3> <div class="callout" data-equalizer-watch="block1"> <p> The three callouts in this panel will equalize, even when stacked. </p> </div> <div class="callout" data-equalizer-watch="block1"> <p> this is the sample text for displaying inside the block of the parent container. </p> </div> <div class="callout" data-equalizer-watch="block1"> <p> this is the sample text for displaying inside the block of the parent container. </p> </div> </div> </div> <div class="cell medium-4"> <div class="callout panel" data-equalizer-watch="parent"> <p> this is the sample text for displaying inside the block of the parent container. </p> </div> </div> <div class="cell medium-4"> <div class="callout" data-equalizer-watch="parent"> <p> this is the sample text for displaying inside the block of the parent container. </p> </div> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia : https://get.foundation/sites/docs/equalizer.html
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA