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.
En Foundation CSS, las clases flotantes eliminan el elemento del flujo normal de la página y lo colocan en un lado particular de su elemento principal.
Clases Foundation CSS Float Left/Right:
- float-left: esta clase elimina el elemento del flujo normal de la página web y lo hace flotar en el lado interior izquierdo del contenedor.
- float-right: esta clase elimina el elemento del flujo normal de la página web y hace que flote en el lado interior derecho del contenedor.
- clearfix: esta clase elimina el flotador si lo agregamos en el elemento principal.
Sintaxis:
<div class="float-class">
...
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la clase float-left .
HTML
<!DOCTYPE html> <html> <head> <title>Float Left/Right classes</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <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" crossorigin="anonymous"> </script> </head> <body style="margin: 30rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Float Left/Right</h3> <div class="callout clearfix"> <a class="button float-left success"> <strong>Left Floated</strong> </a> </div> </center> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de la clase float-right .
HTML
<!DOCTYPE html> <html> <head> <title>Float Left/Right classes</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <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" crossorigin="anonymous"> </script> </head> <body style="margin: 30rem;"> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <h3>Foundation CSS Float Left/Right</h3> <div class="callout clearfix"> <a class="button float-right success"> <strong>Right Floated</strong> </a> </div> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/float-classes.html#float-left-right
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA