En este artículo, aprenderemos cómo alinear dos elementos HTML en los lados izquierdo y derecho de un documento utilizando Tailwind CSS .
Puede hacer flotar fácilmente los elementos hacia la izquierda y hacia la derecha usando Tailwind CSS. Esto se puede hacer utilizando las clases tailwind flex o flow-root .
Clases utilizadas:
- flow-root: esta clase borra rápidamente el contenido flotante dentro de un contenedor al agregar una utilidad flow-root .
- posición: Esto se utiliza para controlar la colocación de elementos posicionados.
Método 1: Uso de la utilidad de raíz de flujo
Nota: La clase flow-root se agrega en la versión actualizada, es decir, v2.0 o superior, en Tailwind. Si no ha actualizado, simplemente reemplace flow-root con clearfix en los códigos. La clase clearfix se eliminó porque flow-root es una solución más simple para el mismo problema en los navegadores modernos.
Sintaxis:
<div class="flow-root">
<p class="float-left">Welcome to GeeksforGeeks</p>
<p class="float-right">A complete portal for geeks</p>
</div>
Ejemplo 1: agregue la clase flow-root al padre (div) del elemento que debe alinear a la izquierda o a la derecha.
HTML
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
body,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>Positions using class flow-root</b>
<br /><br />
<div class="flow-root ">
<p class="float-left text-green-600">
Welcome to GeeksforGeeks
</p>
<p class="float-right text-green-800">
A complete portal for geeks
</p>
</div>
</body>
</html>
Producción:
Método 2: Clase de posición CSS Tailwind
Sintaxis:
<div class="relative">
<p class="absolute left-0">
Welcome to GeeksforGeeks
</p>
<p class="absolute right-0">
A complete portal for geeks
</p>
</div>
Nota: Puede usar las utilidades {superior|derecha|inferior|izquierda|recuadro}-0 para anclar elementos absolutamente posicionados contra cualquiera de los bordes del padre posicionado más cercano. También puede usar los parámetros superior e inferior para colocar el elemento de la forma que desee.
Parámetros:
- relativo: esta clase se utiliza para establecer la posición de un elemento en relación con el flujo normal del documento.
- absoluto: esta clase se utiliza para establecer la posición de un elemento fuera del flujo normal del documento, lo que hace que los elementos vecinos actúen como si el elemento no existiera.
- left-0 : Posiciona el elemento a la izquierda de la pantalla.
- right-0 : Posiciona el elemento en el lado derecho de la pantalla.
- top-0 : Posiciona el elemento en la parte superior de la pantalla.
- bottom-0 : Posiciona el elemento en la parte inferior de la pantalla.
Ejemplo 2:
HTML
<!DOCTYPE html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
<style>
body,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
Position left and right using
relative class
</b>
<br /><br />
<div class="relative">
<p class="absolute left-0 text-green-600">
<b>Welcome to GeeksforGeeks </b>
</p>
<p class="absolute right-0 text-green-800">
<b>A complete portal for geeks </b>
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA