Come faccio a far galleggiare un div sul fondo del suo contenitore?

Ho fatto fluttuare immagini e inset box nella parte superiore di un contenitore usando float:right (o left) molte volte. Recentemente ho avuto bisogno di far fluttuare un div nell'angolo in basso a destra di un altro div con il normale text wrap che si ottiene con float (testo avvolto solo sopra e a sinistra).

Ho pensato che questo deve essere relativamente facile anche se float non ha un valore di fondo, ma non sono stato in grado di farlo utilizzando una serie di tecniche e cercando sul web non è venuto fuori nulla di diverso dall'uso del posizionamento assoluto, ma questo non dà il comportamento corretto di avvolgimento del testo.

Avevo pensato che questo sarebbe stato un design molto comune, ma a quanto pare non lo è. Se nessuno ha un suggerimento, dovrò dividere il mio testo in scatole separate e allineare i div manualmente, ma questo è piuttosto precario e non vorrei doverlo fare in ogni pagina che ne ha bisogno.

EDIT: Solo una nota per chiunque venga qui. La domanda linkata sopra come duplicato in realtà non è un duplicato. Il requisito che il testo si avvolga intorno all'elemento inset lo rende completamente diverso. Infatti, la risposta alla risposta più votata qui rende chiaro perché la risposta nella domanda collegata è sbagliata come risposta a questa domanda. Comunque, non sembra esserci ancora una soluzione generale a questo problema, ma alcune delle soluzioni postate qui e nella domanda collegata possono funzionare per casi specifici.

Impostare il div padre su posizione: relativa, poi il div interno su...

position: absolute; 
bottom: 0;

...ed ecco fatto :)

Commentari (6)
Soluzione

Dopo aver lottato con varie tecniche per un paio di giorni devo dire che questo sembra essere impossibile. Anche usando javascript (che non voglio fare) non sembra possibile.

Per chiarire a chi potrebbe non aver capito - questo è quello che sto cercando: nell'editoria è abbastanza comune impaginare un inserto (immagine, tabella, figura, ecc.) in modo che il suo fondo si allinei con il fondo dell'ultima riga di testo di un blocco (o pagina) con il testo che scorre intorno all'inserto in modo naturale sopra e a destra o a sinistra a seconda di quale lato della pagina l'inserto si trova. In html/css è banale usare lo stile float per allineare la parte superiore di un inserto con la parte superiore di un blocco, ma con mia sorpresa sembra impossibile allineare la parte inferiore del testo e dell'inserto nonostante sia un compito di layout comune.

Immagino che dovrò rivedere gli obiettivi di design per questo articolo, a meno che qualcuno non abbia un suggerimento dell'ultimo minuto.

Commentari (4)

Mettete il div in un altro div e impostate lo stile del div genitore su posizione:relativo; Poi sul div figlio impostate le seguenti proprietà CSS: position:absolute; bottom:0;

Commentari (2)