¿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 lugar para el dolor en el mundo y en el mundo.
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 lugar para el dolor en el mundo y en el mundo.
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, de modo 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:
Su texto va aquí.
El código anterior utiliza el elemento MARGIN CSS para agregar 10 píxeles de espacio en blanco en el lado derecho de la imagen. Como hemos alineado la imagen a la izquierda, queremos agregar el espacio en blanco a la derecha.
Básicamente, los cuatro números representan la parte superior derecha inferior izquierda. Entonces, si quieres agregar el espacio en blanco a una imagen alineada a la derecha, harías esto:
Su texto va aquí.
Por lo tanto, es bastante sencillo utilizar HTML para realizar esta tarea, pero, una vez más, es posible que no funcione bien en sitios receptivos.
Envolver el texto alrededor de la imagen usando CSS
La mejor manera de envolver el texto alrededor de una imagen es usar CSS. Le brinda más control de grano fino sobre el posicionamiento de los elementos y funciona mejor con los estándares de codificación modernos.
A pesar de que incluí CSS directamente en la etiqueta de imagen en el ejemplo de HTML, tampoco deberías hacerlo nunca más. 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, llamé a 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!
