Alinear el stock de imágenes a la derecha con el texto doblado

Un usuario preguntó 👇

Quiero apilar varias imágenes a la derecha con texto fluyendo a su alrededor (arriba, izquierda, luego abajo). No hay texto entre ellos. Probé las galerías y los bloques de imágenes. El problema con las imágenes separadas es que, si el espacio lo permite, irán una al lado de la otra. Si los separo con texto, pueden ir uno al lado del otro pero compensarlos verticalmente, muy mal. Las columnas no funcionarán porque el texto no regresará responsablemente al ancho completo debajo de la pila de imágenes.

La única forma que encontré para hacer esto es: 1. Insertar las imágenes en bloques de imagen, alineados a la derecha 2. Crear un bloque html con

3. Edite cada imagen como html, copie el código y péguelo en el bloque div html. 4. Elimine los bloques de imágenes por separado.

Esto hace lo que quiero, pero es genial hacer docenas de páginas. La otra desventaja es que no puedo reemplazar o editar imágenes sin pasar por la mayor parte del proceso nuevamente.

¿Alguna idea de una manera más fácil?

(@ alegremente)

Hace 1 año, 9 meses

Es lo que necesitas clear. Si el estilo de cada imagen float:right; clear:right entonces las imágenes no irán una al lado de la otra. Creo que el bloque de imagen tiene el campo Avanzado donde puedes agregar una clase. Elija un nombre de clase como «borrar a la derecha» y agregue la misma clase a todas las que necesite de esa manera. Luego defina la clase en Personalizador> CSS Extra como
.right-clear {float: right; clear: right; margin-left: 1em;}
ajuste el margen a su preferencia. (la em es el ancho de la letra mi cualquiera que sea la fuente que esté usando la proporción para menos de 1 es como 0.5em)

Por cierto, sugerí que el editor tuviera una opción clear, pero no estuvieron de acuerdo. Si esto hace lo que desea, puede solicitarlo en GitHub.
https://github.com/WordPress/gutenberg/issues/

Lanzador de hilos

(@jwmc)

Hace 1 año, 9 meses

Gracias, pero en mi experiencia, «clear» también borrará el texto y evitará que se envuelva. Por lo tanto, cualquier texto posterior comenzará debajo de la imagen anterior, junto con la imagen con «claro», a menos que la siguiente imagen también sea «transparente», en cuyo caso se presionará más hacia abajo.

(@ alegremente)

Hace 1 año, 9 meses

Recomiendo que solo las imágenes consigan la clase. El texto no se borra. Por lo general, pones la imagen primero y luego el texto, y se ve bien. Con un puñado de imágenes, puede colocar las imágenes delante de todo el texto. O puede intercambiar imagen y texto, pero si el texto es corto, tendrá espacios.

Lanzador de hilos

(@jwmc)

Hace 1 año, 9 meses

Bueno, mi cara está roja. Podría jurar que probé todos los cambios a ese enfoque antes sin éxito, pero ahora funciona. Tan simple como. Gracias.

(@ alegremente)

Hace 1 año, 9 meses

Me alegro de que hayas logrado resolverlo. Siéntase libre de escribir una edición en GitHub, luego clear es posible hacer una elección en el editor en lugar de darle me gusta manualmente.

Lanzador de hilos

(@jwmc)

Hace 1 año, 9 meses

Lo siento, hablé demasiado pronto. Si bien este enfoque permite que el texto se ajuste correctamente, utilizo muy pocos gráficos, excepto ciertas partes que deben alinearse correctamente con las imágenes. Con este enfoque, esos gráficos se basan en la última foto; No puedo controlar su ubicación.

Así es como se ve (derecha) con el gran div flotando alrededor de los bloques de imágenes de fotos para que puedan ver lo que estoy tratando de hacer:
https://forestpathology.org/canker/sooty-bark-maple/

Esta respuesta fue modificada hace 1 año, 9 meses.

(@ alegremente)

Hace 1 año, 9 meses

Su página se ve bien en mi tamaño de ventana normal, pero en una ventana pequeña (como un teléfono), las imágenes están completamente separadas del texto. Aunque supongo que está bien.

Los gráficos pequeños no deben tener la clase clara y deben plegarse en el elemento o en alguna otra carpeta para que el contexto flotante sea diferente al de las imágenes grandes.

Lanzador de hilos

(@jwmc)

Hace 1 año, 9 meses

Gracias por seguir conmigo en esto. Los gráficos pequeños en cualquiera de los elementos anidados (div> figura> imagen) que puedo encontrar no tienen propiedades «claras». El editor de bloques no permite bloques incrustados en elementos, por lo que puedo ver, por lo que parece que he vuelto de crear uno o más bloques html de alguna manera.

(@ alegremente)

Hace 1 año, 9 meses

Trabajando dentro de los límites del editor de bloques, tendrá que pasar por aros para obtener lo que necesita. El objetivo es tener tus baños en diferentes contextos para que no se afecten entre sí. Oh https://developer.mozilla.org/en-US/docs/Web/CSS/float

cuando un elemento flota, se saca del flujo normal del documento (aunque sigue siendo parte de él). Se mueve hacia la izquierda, o hacia la derecha, hasta que toca el borde de la caja en la que se encuentra u otro elemento flotante.

El truco es hacer que los pequeños gráficos floten hacia la caja donde están y no los otros flotadores.

Ver también:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats