Vamos con lo prometido.
A ver si con algo de suerte enderezamos el tema y dejamos atrás desviaciones o aportaciones que nada tienen que ver con lo planteado inicialmente.
Pero hay veces que es necesario algunos toques de atención para evitar, ¿cómo lo llamas, Furoya?, eso, desviaciones o ¿
pavadas?.
Sigo pensando que la solucción que más situaciones puede amparar pasa por
los flotados posicionados que mencioné en
#12.
Lamentáblemente hoy por hoy es poco (o nada) práctica, incluso a efectos demostrativos.
Otra posible vía de solucción pasa por el uso del
flexbox y sus items. Esta queda pendiente de que alguien se anime a explorarla.
Así que la siguiente propuesta pasa por algunas premisas, esto es, no es universal ni perfecta, y habrá que tener presente (o limitar) los casos donde será efectiva:
- Más de un párrafo.
- La relación entre contenido del último párrafo y relación del aspecto de la imagen (h/l) y cómo no, el tamaño al que queramos presentar dicha imagen.
- El último párrafo no va a fluir por encima de la imagen en caso de ser esta menos alta que la caja generada por aquél.
En estos dos ejemplos, la imagen está posicionada abajo derecha de la caja contenedora.
Para hacerle sitio (que el texto no se sobreponga a ella) dos aproximaciones:
Ejemplo 1
limitamos el tamaño del último párrafo con
p:last-child
El tamaño del último /p/ queda acotado declarando su width.
Ejemplo 2
El "
tamaño" del último /p/ queda acortado utilizando el pseudoelemento
::before flotado para que ocupe el espacio de la imagen:
p:last-child::before
Los peligros de estos dos ejemplos ya quedan advertidos: todo se irá de paseo si no hay relación entre tamaño imagen y tamaño de ::before o párrafo.
Creo que en ambos ejemplos se podrá jugar con los max/min en altura y anchura de los 2 elementos implicados: párrafo e imagen.
Estos dos riesgos se evitarían, creo porque no he seguido adelante, con el uso de las nuevas propiedades de css como son:
Variables CSS módulo 1 y para hacerlo más flexible combinarlo con la utilización en sus valores de la
Función cal() o la propiedad box-sizing.