¿Necesita el código para ajustar el texto alrededor de una imagen? Normalmente, cuando crea una página HTML, todo fluye linealmente, es decir, un bloque directamente tras 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 ajustar el texto usando HTML. Tenga en cuenta que no tiene que usar CSS para ajustar el texto.
Sin embargo, en estos días el W3C recomienda usar CSS en lugar de HTML para este tipo de tareas. Mencionaré ambos 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 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. Ut pellentesque nunc in 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:
<img src="URL DE IMAGEN" align="izquierda" /><p>Tu texto va aquí.</p>
Si desea que el texto aparezca a la izquierda y la imagen en el extremo derecho, simplemente cambie el parámetro de alineación a la 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. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img src="URL DE LA IMAGEN" align="right" /><p>Tu texto va aquí.</p>
¡Eso es todo! 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 algo de espacio entre el texto y la imagen.
Puede agregar márgenes a una imagen utilizando el siguiente código de estilo CSS:
<img src=URL DE IMAGEN align=estilo izquierdo=margen: 0px 10px 0px 0px; /><p>Tu texto va aquí.</p>
El código anterior usa 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 SUPERIOR DERECHA INFERIOR IZQUIERDA. Entonces, si desea agregar el espacio en blanco a una imagen alineada a la derecha, debe hacer esto:
<img src=URL DE IMAGEN align=estilo derecho=margen: 0px 0px 0px 10px; /><p>Tu texto va aquí.</p>
Por lo tanto, es bastante simple usar HTML para realizar esta tarea, pero una vez más, es posible que no funcione bien para sitios receptivos.
Ajustar texto alrededor de la imagen usando CSS
La mejor manera de envolver texto alrededor de una imagen es usar CSS. Le brinda un control más detallado sobre el posicionamiento de los elementos y funciona mejor con los estándares de codificación modernos.
<img src="URL DE LA IMAGEN" alt="Una foto" class="izquierda" />
Aunque incluí CSS directamente en la etiqueta de la imagen en el ejemplo de HTML, tampoco deberías volver a hacerlo nunca más. 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 asigna un nombre. En mi ejemplo, nombré la clase left . En mi hoja de estilo, todo lo que tengo que hacer es agregar el siguiente código:
.izquierda { flotador: izquierda; relleno: 0 10px 0 0;}
Como puede ver, agregué 10 px de relleno al lado derecho de la imagen alineada a la izquierda. También usé la propiedad flotante para sacar la imagen 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. También es más fácil de administrar y puede usar muchas más propiedades CSS para personalizar el aspecto de su página web. Si tiene alguna pregunta, no dude en comentar. ¡Disfrutar!
