Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
El componente Ecualizador ayuda a crear múltiples elementos del sitio web de la misma altura. Foundation CSS Equalizer Equalize By Row se usa para fijar la altura de los elementos de la fila. Si hay varios elementos en una fila, la altura de cada elemento será la misma.
Atributo utilizado:
- data-equalize-by-row: este atributo se usa para establecer la misma altura de cada elemento en una fila. Acepta valor de tipo booleano.
Sintaxis:
<div class="grid-x grid-padding-x large-up-4"
data-equalizer data-equalize-by-row="true">
<div class="cell" data-equalizer-watch>...</div>
...
</div>
Ejemplo 1: este ejemplo describe los usos de Foundation CSS Equalizer Equalize By Row.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Equalizer Equalize By Row
</title>
<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>
<style>
body {
padding: 0 100px;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>Foundation CSS Equalizer Equalize By Row</h4>
<div class="grid-x grid-margin-x" data-equalizer
data-equalize-by-row="true">
<div class="cell medium-8">
<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>
<p>
This article in on the Equalizer
Component of Foundation CSS. It
is published in GeeksforGeeks
Platform.
</p>
</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>
<script>
$(document).foundation();
</script>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe los usos de Foundation CSS Equalizer Equalize By Row.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Equalizer Equalize By Row
</title>
<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>
<style>
body {
padding: 0 100px;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h4>Foundation CSS Equalizer Equalize By Row</h4>
<div class="grid-container">
<div class="grid-x grid-margin-x"
data-equalize-on="medium" data-equalizer="parent"
data-equalize-by-row="true">
<div class="cell medium-8">
<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#equalize-by-row
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA