Código HTML para envolver texto alrededor de la imagen

Necesita el código para envolver un texto alrededor de una imagen? Normalmente, cuando crea una página HTML, todo fluye linealmente, lo que significa un bloque directamente después de otro. Todas mis publicaciones anteriores son un ejemplo de esto, yo.mi. texto, luego imagen, luego texto, etc.

A veces es posible que desee incluir texto junto a una imagen en lugar de debajo de ella. Esto se llama texto de envoltura alrededor de la imagen. En realidad es bastante fácil de envolver el texto usando HTML. Tenga en cuenta que no tiene que usar CSS para envolver texto.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce Dictum gravida Enim, Quis Ultricies Mauris Posuere Quis. DUI adipiscing tincidunt sagittis. Cum Sociis Natoque Penatibus et Magnis Dis Particurient Montes, Nascetur Ridiculus MUS. Aliquam a Felis vitae augue lobortis dictum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc en Lorem Egestas no imperdiet enim congue.

Para que el texto envuelva a lo largo del lado derecho de la imagen, debe alinear la imagen a la izquierda:

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce Dictum gravida Enim, Quis Ultricies Mauris Posuere Quis. DUI adipiscing tincidunt sagittis. Cum Sociis Natoque Penatibus et Magnis Dis Particurient Montes, Nascetur Ridiculus MUS. Aliquam a Felis vitae augue lobortis dictum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc en Lorem Egestas no imperdiet enim congue.
 
 
Aunque incluí CSS directamente en la etiqueta de imagen en el ejemplo de HTML, realmente nunca debería hacerlo más tampoco. En su lugar, debe tener un archivo separado llamado hoja de estilo que contenga todo su código CSS.
 
En la etiqueta IMG, simplemente asigna una clase a la etiqueta y le da un nombre. En mi ejemplo, llamé a la clase izquierda. En mi hoja de estilo, todo lo que tengo que hacer es agregar el siguiente código:
 
.izquierda float: izquierda; relleno: 0 10px 0 0;
 
Como puede ver, agregué 10px de relleno al lado derecho de la imagen alineada a la izquierda. También utilicé la propiedad de flotación para mover la imagen del flujo normal del documento y la puse al lado izquierdo del contenedor principal.
 
Como puede ver, es mucho más limpio que agregar todo ese código a la etiqueta IMG en sí misma. También es más fácil de administrar y puede usar muchas más propiedades de CSS para personalizar el aspecto en su página web. Si tiene alguna pregunta, no dude en comentar. Disfrutar!