¿Necesita el código para ajustar el texto alrededor de una imagen? Normalmente cuando creas una página HTML, todo fluye linealmente, es decir, 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 envoltura de texto alrededor de la imagen. En realidad, es bastante fácil ajustar el texto con 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. Mencionaremos los dos métodos a continuación, pero si puede, es mejor usar CSS, ya que es más adaptable a 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 des parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc en lorem egestas non imperdiet enim congue.
Para que el texto se ajuste a la derecha de la imagen, debe alinear la imagen a la izquierda:
<img itemprop="image" data-original="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 des parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc en lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
¡Eso es todo! Bastante fácil ¿verdad? El único momento en que desearía usar CSS es si desea agregar márgenes a las imágenes, de modo que haya espacio entre el texto y la imagen.
Puede agregar márgenes a una imagen usando el siguiente código de estilo CSS:
<img itemprop="image" data-original=”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 la PARTE SUPERIOR DERECHA INFERIOR IZQUIERDA. Entonces, si quiere agregar el espacio en blanco a una imagen alineada a la derecha, haría esto:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Así que es bastante simple usar HTML para realizar esta tarea, pero una vez de nuevo, puede que no funcione bien para sitios receptivos.
Ajustar el texto alrededor de la imagen mediante CSS
La mejor forma de ajustar el texto en una imagen es usar CSS. Le da un control más fino sobre el posicionamiento de los elementos y funciona mejor con estándares de codificación modernos.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Aunque incluí CSS directamente en la etiqueta de imagen en el ejemplo HTML , tú 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 asigne una clase a la etiqueta y asígnele un nombre. En mi ejemplo, nombré a la clase left. 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 float para mover la imagen fuera del flujo normal del documento y ponerla 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 de CSS para personalizar el aspecto de tu página web. Si tiene alguna pregunta, siéntase libre de comentar. ¡Disfruta!