CSS envuelve texto alrededor de la imagen
Ejemplo 1:
Comenzaremos a escribir el código correcto y lo ejecutaremos en el código de Visual Studio. Para comenzar, creamos un nuevo archivo y elegimos HTML como idioma. Ahora pon "!"Y presione la tecla" Enter ". Todas las etiquetas HTML necesarias se pueden mostrar aquí. No tendremos que escribir todas estas etiquetas. Después de eso, solo usamos la etiqueta "Enlace" en la "Cabeza" para insertar el nombre del archivo CSS que queremos vincular con este archivo HTML. En este código, primero colocamos el encabezado y luego un DIV con el nombre de "cuadrado". Dentro de este div "cuadrado", tenemos otro div en el que estamos insertando la imagen utilizando la etiqueta "img".
Después de poner la imagen en el segundo div, cierre este div y genere un párrafo debajo de este div. Cuando completamos este párrafo y lo cerramos. Luego, cerramos la primera etiqueta "div". Envolveremos este texto alrededor de esta imagen que hemos insertado. Para envolver el texto, iremos al archivo CSS, donde usaremos la propiedad "Flotación" para envolver el texto.
Primero, tenemos que establecer el "margen" del cuerpo en "20px" y también alinear todo el cuerpo con el "centro". El encabezado "H1" también está decorado con "púrpura" como el "color" de este encabezado. Usamos la "Fuera de la Fuente" y lo ajustamos a "Argelino". Luego, estamos utilizando la propiedad "flotante" para la imagen que hemos insertado en el código HTML. Y configure este valor de propiedad de "flotación" en "izquierda", en cuanto a que la imagen se mueva hacia el lado izquierdo. También ajustamos el "margen" de la imagen a "4px". El "ancho" y la "altura" de esta imagen son "250px". También tenemos un párrafo, así que establecemos este párrafo también. Alineamos el texto del párrafo y lo establecemos en "justificar". Establecimos el "tamaño de fuente" de este párrafo y lo ajustamos a "20px". La "familia de fuentes" para este párrafo es "Calibri".
A continuación se muestra la captura de pantalla del código de arriba y verá que la imagen está flotando en el lado izquierdo y el texto está envuelto en esta imagen en el lado derecho. Envolvemos el texto del párrafo alrededor de esta imagen usando la propiedad "flotante" en CSS.
Ejemplo # 2:
Estamos utilizando el código HTML del ejemplo anterior para este ejemplo, pero esta vez estableceremos la imagen en el lado derecho utilizando la propiedad "flotante". En este código CSS, establecemos el margen del cuerpo en "20px" y la propiedad "Align de texto" se ajusta al "Centro". El "color" es "verde" para el encabezado y la "familia de fuentes" es "argelina". Además, use la "decoración de texto" y coloque "subrayar" como el valor de esta propiedad. Estamos flotando la imagen a la "derecha" para que el texto del párrafo aparezca en el lado izquierdo de esta imagen. El "margen" del "IMG" es "5px".
También establecemos el "ancho" en "190px" y también la "altura" es "90px". Debajo de esto, usamos la propiedad "Align de texto" para la "P" y esta "P" está describiendo el párrafo. Establecimos la propiedad "Alinear de texto" en la palabra clave "Justificar" y el "tamaño de fuente" para esto se establece en "18px". El "Times New Roman" se utiliza como la "Fontamilia de fuentes".
Puede ver en la captura de pantalla a continuación que la imagen aparece en el lado derecho debido a la propiedad "flotante" y el texto está envuelto alrededor de esta imagen.
Ejemplo # 3:
Vamos a usar dos imágenes diferentes aquí. Ponemos la primera imagen dentro del div y luego colocamos un párrafo. Después de este párrafo, nuevamente insertamos una imagen dentro de otro div y nuevamente agregamos un párrafo debajo de esta imagen. Ajustaremos el texto en ambas imágenes en el código CSS. Mira cómo envolveremos el texto alrededor de ambas imágenes en CSS a continuación.
La propiedad de "margen" y "alineación de texto" para el cuerpo son la misma que hemos usado en los ejemplos anteriores. El "color" se cambia a "rojo" esta vez para el encabezado. La "Font-Family" se selecciona como "Argelina" y también "Subraye" este encabezado. Estamos configurando la propiedad "flotante" para la primera imagen mencionando el nombre de la primera clase de imagen y configurando la propiedad "flotante" en el "derecho". El "margen" que estamos usando para la primera imagen es "5px". También utilizamos la propiedad de "ancho" y "altura" y establecemos tanto en "200px".
Luego, también ajustamos la segunda imagen y "flotan" esta segunda imagen a la "izquierda" y su "margen" es el mismo que hemos establecido para la primera imagen. Ahora, "justificamos" este párrafo y establecemos su "tamaño de fuente" en "17px". "Arial" se utiliza como la "familia de fuentes" para "P".
Dos imágenes se representan en la salida. La primera imagen se representa en el lado "izquierda" y la segunda imagen se representa en el lado "derecho" de la pantalla de salida y todo el texto está envuelto en ambas imágenes.
Ejemplo # 4:
En nuestro último ejemplo, pusimos un párrafo y luego un Div. Dentro de este contenedor Div insertamos una imagen y un párrafo también. Ahora, mira cómo utilizamos todos estos párrafos y ajusta la imagen y también envuelve el texto alrededor de la imagen.
Estamos utilizando valores de "20px" "margen" y "centro" para "alinearse" de texto "para el cuerpo. Luego, establecemos el color en "granate" para el encabezado y la fuente, la familia de fuentes "argelinas". También "subrayamos" el encabezado. Definimos la propiedad "flotante" para la imagen especificando el nombre de la clase de imagen y configurando la propiedad "Flotación" en "Left". Para esta imagen, el "margen" que estamos usando es "5px". El "ancho" de esta imagen es "300px" y su "altura" es "300px".
Ahora, estamos aplicando algunas propiedades al párrafo para que sea más atractivo. Establecimos el "color" del texto del párrafo en "negro". También establecemos la propiedad alineada del texto en "justificar" y establecemos "18px" para el "tamaño de la fuente". También ajustamos el "Times New Roman" "Font-Family" para el párrafo.
Puede notar que hay un párrafo sobre la imagen, un párrafo debajo de la imagen, un texto de párrafo en el lado derecho de la imagen, y la imagen está flotando hacia el lado izquierdo. El texto del párrafo envuelve esta imagen porque configuramos esto en el código CSS.
Conclusión
El enfoque de este artículo es explicarle cómo envolver el texto alrededor de la imagen en CSS. Estudiamos este concepto en profundidad en este artículo y explicamos qué está envolviendo el texto y lo que debemos hacer para envolver el texto alrededor de la imagen. Hemos usado la propiedad "flotante" para flotar la imagen a "izquierda" o "derecha" y envolver texto alrededor de esta imagen. También hemos incluido múltiples ejemplos aquí en los que hemos envuelto el texto en torno a la imagen, incluidos los resultados de todos los ejemplos del artículo. Espero que tenga una comprensión bastante buena del texto de envoltura en torno al concepto de imagen en CSS después de leer este artículo y aplicar estos ejemplos en práctica por su cuenta.