¿Necesita el código para envolver el texto alrededor de una imagen? Normalmente, cuando creas una página HTML, todo fluye de forma lineal, lo que significa un bloque directamente después de otro. Todas mis publicaciones anteriores son un ejemplo de esto, es decir, 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 envolver texto alrededor de la imagen. En realidad es bastante fácil envolver el texto usando HTML. Tenga en cuenta que no tiene que usar CSS para envolver el texto.
Sin embargo, en estos días el W3C recomienda usar CSS en lugar de HTML para este tipo de tareas. Mencionaré los dos métodos a continuación, pero si puede, es mejor usar CSS, ya que es más adaptable a los diseños de sitios web receptivos.
Envolver el texto alrededor de la imagen usando HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Este es un gran local de lorem egestas non imperdiet enim congue.
Para que el texto se ajuste al lado derecho de la imagen, debe alinear la imagen a la izquierda:
Su texto va aquí.
Si desea que el texto aparezca a la izquierda y que la imagen aparezca en el extremo derecho, simplemente cambie el parámetro de alineación a "derecha".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Este es un gran local de lorem egestas non imperdiet enim congue.
Su texto va aquí.
¡Eso es! Bastante fácil ¿verdad? La única vez que querría usar CSS es si desea agregar márgenes a las imágenes, para que haya un espacio entre el texto y la imagen.
Puede agregar márgenes a una imagen usando el siguiente código de estilo CSS:
A pesar de que incluí CSS directamente en la etiqueta de imagen en el ejemplo de HTML, realmente nunca deberías hacer eso tampoco. En su lugar, debes tener un archivo separado llamado hoja de estilo que contenga todo tu código CSS.
En la etiqueta IMG, simplemente asigna una clase a la etiqueta y le da un nombre. En mi ejemplo, nombré la clase izquierda. En mi hoja de estilo, todo lo que tengo que hacer es agregar el siguiente código:
.left {float: left; 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 flotante para mover la imagen fuera del flujo normal del documento y colocarla en el 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í. También es más fácil de administrar y puedes usar muchas más propiedades CSS para personalizar el aspecto de tu página web. Si tiene alguna pregunta, no dude en comentar. ¡Disfrutar!