CSS tira a la derecha
Ejemplo 01:
Dentro de nuestro primer ejemplo, usaremos la propiedad flotante para extraer los diferentes elementos hacia la derecha, la izquierda y en ninguna parte. Además, compararemos estas propiedades entre sí para una mejor comprensión. Comenzamos nuestro primer ejemplo con el formato de documento HTML estándar utilizado para la creación de cualquier página web basada en HTML. La etiqueta de cabeza contiene el título de la página HTML que se creará con la ayuda de una etiqueta interna de "título". Después de esto, tenemos una etiqueta de estilo y la etiqueta del cuerpo principal. Antes de mirar el estilo CSS de una página HTML, tenemos que echar un vistazo al cuerpo que se va a diseñar. El cuerpo de esta página HTML contiene el encabezado de tamaño 1 simple y la etiqueta "div" principal para crear una sección dentro de la página HTML. Esta etiqueta "div" se especifica con la clase "A" para la diferenciación mientras está diseñando. Dentro de esta sección, tenemos 3 elementos "div" más que se usan aquí.
Las tres secciones del DIV se especifican con tres clases diferentes: flotante-izquierda, flotación y flotación-none. Después de cerrar estas tres secciones "Div", cerramos la sección principal "Div" también. El cierre de la sección Div principal es seguida por la etiqueta "Cuerpo" de este HTML. El cuerpo y su parte de los elementos ahora están completos. Para hacer que algunas secciones se tiren a la derecha o a la izquierda, necesitamos diseñarlas en consecuencia. Por lo tanto, dentro de la etiqueta de estilo del código HTML, usamos la clase "A" para la primera sección "Div" para colocarla en relación con la página HTML a través de la propiedad "Posición".
Además, esta sección principal tiene 400 píxeles de ancho y altura con un borde sólido de 3 píxeles de color marrón. Después de esto, utilizamos las clases de izquierda flotante, flotante y flotante para las secciones "Div" internas para diseñarlas en consecuencia. La propiedad flotante se usa para que la primera sección de div interiores la tire a la derecha exacta de la página HTML. Además, esta sección contiene ancho de 100 píxeles, altura de 120 píxeles y un borde punteado de 3px en color azul sólido. El segundo "div" interno está posicionado para relativo y se tira hacia la izquierda de la página HTML utilizando la propiedad flotante. Tiene 200px de ancho, altura de 120 px, con el borde verde sólido de 3px. La última sección interna contiene una posición absoluta sin propiedad de extracción especificada. Además, tiene un borde marrón sólido de 3px, un ancho de 100px y una altura de 100px. Este código está listo para usarse en el navegador Chrome a través del código Visual Studio para ver el estilo.
Al ejecutarlo dentro del navegador Chrome, obtenemos la siguiente salida. La sección Div principal se muestra con un borde rojo sólido y su posición es relativa a la página HTML. Mientras que la sección DIV de color azul del borde punteado se tira a la derecha con el uso de la propiedad "flotante" en el CSS de este código como se muestra en la imagen. La sección DIV de color verde se tira a la izquierda utilizando la propiedad "flotante" y es relativa a la página HTML. La posición de la sección marrón "div" se especifica como relativa y se muestra en la imagen.
Ejemplo 02:
Comencemos con otro ejemplo de uso de la propiedad flotante de CSS para extraer los elementos del HTML hacia la derecha o la izquierda. Este código comienza con la misma etiqueta HTML siguiendo la etiqueta "Cabeza" que contiene el título para esta página HTML, I.mi. "CSS tira a la derecha". Para agregar un título para esta página, utilizamos la etiqueta de título. Primero tenemos que echar un vistazo a la sección del cuerpo de nuestro script HTML. Agregamos un rumbo al cuerpo de la página HTML usando la etiqueta de encabezado "H1", I.mi. Encabezado de gran tamaño.
Después de esto, probamos una etiqueta de "sección" dentro de este código HTML. Esta etiqueta de sección se utiliza para crear una sección dentro del cuerpo de la página HTML. Dentro de esta sección, usamos tres nuevos elementos "div" y un elemento de párrafo. Ambas etiquetas DIV utilizan la misma clase "Left-Pull", mientras que la tercera etiqueta Div usa otra clase "derecha" en su etiqueta de apertura. Las dos primeras etiquetas DIV contienen textos simples dentro de ellos, mientras que la tercera etiqueta Div contiene una etiqueta de imagen "IMG" para agregar la imagen en esta sección DIV. La fuente de esta imagen es nuestro sistema local y está en formato "JPG". El párrafo también contiene una simple línea de texto.
Después del final de las 3 etiquetas DIV y la etiqueta del párrafo, nuestra etiqueta de sección terminó aquí con su cierre. El cuerpo de esta página HTML se completa ahora. Cierre la etiqueta "cuerpo". Dentro de la etiqueta "estilo" de este código HTML para el estilo, especificamos el elemento "sección" para diseñar sus elementos internos combinados a la vez. Este tamaño de sección se define mediante el formato "Border-Box" y contiene el borde de 5 píxeles punteado a su alrededor. El ancho de esta sección es del 50 por ciento, mientras que se tira a la izquierda a través de la propiedad "flotante". Los elementos "Div" están diseñados con un margen de 5 px, 200px de ancho y 150 px de altura para todos. Los elementos DIV que contienen la clase de "pilotaje izquierdo" se muestran en la posición izquierda con el fondo rosa del té.
Mientras que los elementos DIV con la clase de "pilotaje derecho" se tiran a la derecha con el uso de la propiedad "flotante" y el fondo se establece en color azul cielo. Nuestro código está completo y está listo para su uso en el código de Visual Studio a través del menú "Ejecutar" después de la opción "Iniciar depuración".
La salida para este código muestra el encabezado simple y una nueva sección punteada generada dentro de la página HTML. Esta sección contiene tres secciones DIV diferentes dentro de ella. Las dos primeras secciones del div se tiran a la izquierda con el color de fondo rosa del té. Mientras que la tercera sección Div contiene una imagen tirada hacia la derecha de esta página HTML.
Conclusión
Discutimos la necesidad y el uso de extraer los elementos en la página HTML dentro de nuestro párrafo introductorio. Este artículo muestra una demostración muy clara de extraer los elementos CSS hacia la izquierda, derecha o ninguno a través de la propiedad "flotante" de CSS. Se usa en todos los ejemplos para extraer esos elementos en alguna dirección específica con el uso de clases en las secciones DIV. Todos los ejemplos cubiertos en este artículo son bastante simples y fáciles de entender para cualquier usuario de CSS para principiantes y expertos.