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

Ho fatto fluttuare immagini e riquadri nella parte superiore di un contenitore usando float: destra (o sinistra) molte volte. Di recente ho colto la necessità di far galleggiare un div nell'angolo in basso a destra di un altro div con il normale ritorno a capo del testo che si ottiene con il galleggiante (testo spostato sopra e solo a sinistra).

Ho pensato che questo dovesse essere relativamente facile anche se float non ha un valore di fondo, ma non sono stato in grado di farlo usando una serie di tecniche e la ricerca sul web non ha prodotto altro che l'uso del posizionamento assoluto, ma questo non lo fa dare il corretto comportamento a capo automatico.

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

EDIT: solo una nota per chiunque venga qui. La domanda collegata come duplicato sopra non è in realtà un duplicato. Il requisito che il testo avvolge l'elemento inserto lo rende completamente diverso. In effetti, la risposta alla risposta più votata qui chiarisce perché la risposta nella domanda collegata è errata come risposta a questa domanda. Comunque, non sembra ancora esserci una soluzione generale a questo problema, ma alcune delle soluzioni pubblicate qui e nella domanda collegata potrebbero funzionare per casi specifici.

Imposta il div parent su position: relative, quindi il div interno su ...

position: absolute; 
bottom: 0;

... e ci sei :)

Un modo per farlo funzionare è il seguente:

• Fai galleggiare i tuoi elementi a sinistra come al solito

• Ruota il div parent di 180 gradi usando

  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  

  JSfiddle: http://jsfiddle.net/wcneY/

• Ora ruota tutti gli elementi che galleggiano a sinistra (dai loro una classe) di 180 gradi per rimetterli dritti. Ecco! galleggiano sul fondo.

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

Chiarire per coloro che potrebbero 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 sia allineato con il fondo dell'ultimo riga di testo di un blocco (o pagina) con il testo che scorre attorno all'inserzione in modo naturale sopra e verso destra o sinistra a seconda del lato della pagina in cui si trova l'inserzione. 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 il fondo del testo e dell'inserto nonostante sia un compito di layout comune .

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

L'ho realizzato in JQuery mettendo un elemento del puntone di larghezza zero sopra il galleggiante a destra, quindi dimensionando il puntone (o il tubo) in base all'altezza del genitore meno l'altezza del bambino flottata.

Prima che js entri, sto usando l'approccio di posizione assoluta, che funziona ma consente il flusso di testo dietro. Quindi passo alla posizione statica per abilitare l'approccio a puntoni. (l'intestazione è l'elemento genitore, il ritaglio è quello che voglio in basso a destra e il tubo è il mio puntone)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

La pipe deve arrivare prima, quindi il ritaglio, quindi il testo nell'ordine HTML.

Questo mette un div fisso nella parte inferiore della pagina e corregge in fondo mentre scorri verso il basso

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Inserisci il div in un altro div e imposta lo stile del div parent su position:relative;Quindi sul div figlio imposta le seguenti proprietà CSS:position:absolute; bottom:0;

Se stai bene con solo la riga più in basso del testo che va al lato del blocco (al contrario di tutto intorno e sotto di esso, cosa che non puoi fare senza terminare il blocco e iniziarne uno nuovo), è non impossibile far galleggiare un blocco in uno degli angoli inferiori di un blocco genitore. Se inserisci del contenuto in un tag di paragrafo all'interno di un blocco e desideri spostare un link nell'angolo in basso a destra del blocco, inserisci il link all'interno del blocco di paragrafo e impostalo su float: a destra, quindi inserisci un tag div con clear : entrambi impostati appena sotto la fine del tag di paragrafo. L'ultimo div è quello di assicurarsi che il tag genitore circonda i tag fluttuanti.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

Se si imposta l'elemento genitore come posizione: relativo, è possibile impostare il figlio nella posizione di impostazione inferiore: assoluto; e in basso: 0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

Se vuoi che il testo si avvolga bene: -

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

So che questa roba è vecchia, ma di recente ho riscontrato questo problema.

usare i consigli div di posizione assoluta è davvero sciocco, perché l'intera cosa del galleggiante perde punti con posizioni assolute.

ora, non ho trovato una soluzione universale, ma in molti casi prople usa div galleggianti solo per visualizzare qualcosa in fila, come una serie di elementi di span. e non puoi allinearlo verticalmente.

per ottenere un effetto simile puoi fare questo: non rendere il float div, ma imposta la proprietà display su inline-block. allora puoi allinearlo verticalmente come preferisci. hai solo bisogno di proprietà div insieme con i genitori vertical-aligna uno top, bottom, middleobaseline

spero che aiuti qualcuno

Con l'introduzione di Flexbox , questo è diventato abbastanza facile senza molto hacking. align-self: flex-endsull'elemento figlio verrà allineato lungo l' asse trasversale .

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Produzione:

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

Ho trovato questa soluzione anche per molto tempo. Questo è quello che ottengo:

align-self: flex-end;

link: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ Tuttavia, non ricordo da dove ho aperto questo link. Spero che sia d'aiuto

Vorrei solo fare un tavolo.

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

E il CSS:

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

Guardalo in azione:
http://jsfiddle.net/mLphM/1/

Ho provato diverse di queste tecniche, e quanto segue ha funzionato per me, quindi se tutto il resto qui se tutto il resto fallisce, allora prova questo perché ha funzionato per me :).

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

A ha scelto questo approccio di @ dave-kok. Funziona solo se l'intero contenuto si adatta senza scorrere. Apprezzo se qualcuno migliorerà

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

Ecco il codice http://jsfiddle.net/d9t9joh2/

Questo è ora possibile con la scatola flessibile. Basta impostare 'display' del div parent come 'flex' e impostare la proprietà 'margin-top' su 'auto'. Ciò non distorce alcuna proprietà di entrambi i div.

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

Non sono sicuro, ma uno scenario pubblicato in precedenza sembrava funzionare se si utilizza position: relative anziché assolute sul div figlio.

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

E niente tavoli ...!

Se hai bisogno di un allineamento relativo e i DIV non ti danno ancora quello che vuoi, usa semplicemente le tabelle e imposta valign = "bottom" nella cella in cui vuoi che il contenuto sia allineato in basso. So che non è un'ottima risposta alla tua domanda poiché i DIV dovrebbero sostituire le tabelle, ma questo è quello che ho dovuto fare di recente con una didascalia dell'immagine e finora ha funzionato perfettamente.

Ho provato anche questo scenario pubblicato in precedenza;

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Il posizionamento assoluto fissa il div nella parte più bassa del browser quando si carica la pagina, ma quando si scorre verso il basso se la pagina è più lunga non scorre con te. Ho cambiato il posizionamento in modo che sia relativo e funziona perfettamente. Il div va dritto verso il basso al caricamento, quindi non lo vedrai fino a quando non arriverai al fondo.

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

Un approccio interessante è impilare un paio di elementi float giusti uno sopra l'altro.

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

L'unico problema è che funziona solo quando conosci l'altezza della scatola.

La risposta di Stu è la più vicina a lavorare finora, ma non tiene conto del fatto che l'altezza del div esterno può cambiare, in base al modo in cui il testo si avvolge al suo interno. Quindi, riposizionare il div interno (modificando l'altezza del "tubo") solo una volta non sarà sufficiente. Tale modifica deve avvenire all'interno di un loop, in modo da poter verificare continuamente se hai già ottenuto il posizionamento corretto e, se necessario, riadattarlo.

Il CSS della risposta precedente è ancora perfettamente valido:

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

Tuttavia, Javascript dovrebbe apparire più simile a questo:

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

So che è un thread molto vecchio, ma vorrei ancora rispondere. Se qualcuno segue i seguenti css & html, allora funziona. Il div footer del bambino si attaccherà con il fondo come la colla.

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

Utilizzare la margin-topproprietà css allo scopo di impostare il piè di pagina nella parte inferiore del suo contenitore. E per usare la text-align-lastproprietà css per impostare al centro il contenuto del piè di pagina.

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Oh, giovani .... Eccovi:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

Nessuna posizione assoluta! ! responsive Vecchia scuola

Domanda piuttosto vecchia, ma comunque ... Puoi far galleggiare un div in fondo alla pagina in questo modo:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

Puoi vedere dove accade la magia. Penso che potresti fare lo stesso per spostarlo sul fondo di un div genitore.

semplice ...... nel file html giusto .... avere il "piè di pagina" (o il div che vuoi in fondo) in fondo. Quindi non farlo:

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

FARE QUESTO: (avere il piè di pagina sotto.)

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

Dopo aver fatto ciò, puoi andare sul file css e far fluttuare la "barra laterale" a sinistra. quindi "float" contenuto a destra e quindi "footer" deselezionare entrambi.

dovrebbe funzionare.did per me.

Ho ottenuto questo per funzionare al primo tentativo aggiungendo position:absolute; bottom:0;l'ID div all'interno del CSS. Non ho aggiunto lo stile genitoreposition:relative; .

Funziona perfettamente in Firefox e IE 8, non l'ho ancora provato in IE 7.

una risposta alternativa è l'uso giudizioso di tabelle e rowpan. impostando tutte le celle della tabella sulla riga precedente (eccetto quella del contenuto principale) come rowpan = "2" otterrai sempre un foro di una cella nella parte inferiore della cella della tabella principale che puoi sempre mettere valign = "bottom".

Puoi anche impostare la sua altezza sul minimo necessario per una linea. In questo modo otterrai sempre la tua riga di testo preferita nella parte inferiore, indipendentemente dallo spazio occupato dal resto del testo.

Ho provato tutte le risposte div, non sono riuscito a farle fare ciò di cui avevo bisogno.

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

ecco la mia soluzione:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

Potresti provare a usare un elemento vuoto con una larghezza di 1px e fluttuarlo. Quindi cancella l'elemento che vuoi posizionare e usa l'altezza dell'elemento vuoto per controllare fino a che punto scende.

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}