He flotado imágenes y cajas de inserción en la parte superior de un contenedor usando float:right (o left) muchas veces. Recientemente me encontré con la necesidad de flotar un div en la esquina inferior derecha de otro div con la envoltura de texto normal que se obtiene con float (texto envuelto por encima y a la izquierda solamente).
Pensé que esto debe ser relativamente fácil a pesar de que float no tiene valor inferior, pero no he sido capaz de hacerlo utilizando una serie de técnicas y buscando en la web no ha llegado a nada más que el uso de posicionamiento absoluto, pero esto no da el comportamiento correcto de envoltura de texto.
Pensaba que esto sería un diseño muy común pero aparentemente no lo es. Si nadie tiene una sugerencia, tendré que dividir mi texto en cajas separadas y alinear el div manualmente, pero eso es bastante precario y odiaría tener que hacerlo en cada página que lo necesite.
EDIT: Sólo una nota para cualquiera que venga aquí. La pregunta enlazada arriba como un duplicado no es de hecho un duplicado. El requisito de que el texto envuelva el elemento de inserción lo hace completamente diferente. De hecho, la respuesta a la respuesta más votada aquí deja claro por qué la respuesta en la pregunta enlazada es incorrecta como respuesta a esta pregunta. De todos modos, todavía no parece haber una solución general a este problema, pero algunas de las soluciones publicadas aquí y en la pregunta enlazada pueden funcionar para casos específicos.
Poner el div padre en position: relative
, luego el div interior en...
position: absolute;
bottom: 0;
...y ya está :)
Después de luchar con varias técnicas durante un par de días tengo que decir que esto parece ser imposible. Incluso usando javascript (que no quiero hacer) no parece posible.
Para aclararlo para los que no lo hayan entendido - esto es lo que busco: en la publicación es bastante común maquetar un inset (imagen, tabla, figura, etc.) de manera que su parte inferior se alinee con la parte inferior de la última línea de texto de un bloque (o página) con el texto fluyendo alrededor del inset de manera natural por encima y a la derecha o a la izquierda dependiendo de en qué lado de la página esté el inset. En html/css es trivial utilizar el estilo float para alinear la parte superior de un inset con la parte superior de un bloque pero, para mi sorpresa, parece imposible alinear la parte inferior del texto y del inset a pesar de ser una tarea de maquetación común.
Supongo que tendré que revisar los objetivos de diseño de este artículo, a menos que alguien tenga una sugerencia de última hora.