Buenas! volvemos de nuevo con este contenido que esperamos que te sea de gran utilidad y dé respuesta a tus cuestiones ¡Comenzamos!
¿Necesita el código para ajustar el texto a 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. A esto se le llama ajustar texto alrededor de la imagen. En realidad, es bastante fácil ajustar texto usando HTML. Tenga en cuenta que no es necesario utilizar CSS para ajustar el texto.
Sin embargo, 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.
Ajustar 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 a lo largo del lado derecho de la imagen, debe alinear la imagen a la izquierda:
<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" align="left" /><p>Your text goes here.</p>
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. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" align="right" /><p>Your text goes here.</p>
¡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 algo de espacio entre el texto y la imagen.
Puede agregar márgenes a una imagen mediante el siguiente código de estilo CSS:
<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</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 ARRIBA DERECHA ABAJO IZQUIERDA. Entonces, si desea agregar el espacio en blanco a una imagen alineada a la derecha, debe hacer esto:
<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Por tanto, es bastante sencillo utilizar HTML para realizar esta tarea, pero, una vez más, es posible que no funcione bien para sitios receptivos.
Envolver texto alrededor de la imagen usando CSS
La mejor manera de ajustar el texto a una imagen es usar CSS. Le brinda un control más fino sobre el posicionamiento de los elementos y funciona mejor con los estándares de codificación modernos.
<img src="https://helpdeskgeek.com/how-to/image-text-wrap-css-html/IMAGE URL" alt="A photo" class="left" />
Aunque incluí CSS directamente en la etiqueta de la imagen en el ejemplo HTML, tampoco deberías hacer eso 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 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; padding: 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 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!