Allinea i DIV al fondo o alla linea di base

94

Sto cercando di allineare un tag div figlio alla parte inferiore o alla linea di base del tag div principale.

Tutto quello che voglio fare è avere il Div bambino alla base del Div genitore, ecco come appare ora:

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

Nota

Avrò più messaggi di posta childDivelettronica con altezze variabili e avrò bisogno di tutti per allinearli alla linea di base / fondo.

html css

— sia
fonte

non stavo nemmeno pensando! Ho appena rimosso l'altezza su parentDiv e tutti i childDiv ora siedono sulla linea di base. Sono solo una stupida sally!

— sia

Ma se vuoi che abbia un'altezza specifica, dovresti usare il absoluteposizionamento in base al genitore.

— Y. Shoham

154

Devi aggiungere questo:

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

Quando si dichiara un absoluteelemento, viene posizionato in base al genitore più vicino che non è static(deve essere absolute, relativeo fixed).

— Y. Shoham
fonte

7

Dubito che questo faccia quello che vuole, attualmente questo posizionerà tutti (sembra che ci saranno più elementi figlio se è un grafico a barre dinamico) uno sopra l'altro.

— crmepham

50

Sette anni dopo, le ricerche per l'allineamento verticale continuano a sollevare questa domanda, quindi posterò un'altra soluzione che abbiamo a disposizione ora: il posizionamento del flexbox. Basta impostare display:flex; justify-content: flex-end; flex-direction: columnil div genitore (dimostrato anche in questo violino ):

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

— gcbenison
fonte

1

Semplice. Esattamente quello che volevo. Usalo align-items: flex-start;se non vuoi allungare gli oggetti.

— Madhan

Questa è la migliore risposta di questi tempi!

— Rens Groenveld,

12

Utilizza i valori di visualizzazione CSS di table e table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

Ho creato una demo JSBin qui: http://jsbin.com/INOnAkuF/2/edit

La demo ha anche un esempio di come allineare verticalmente il centro usando la stessa tecnica.

— romiem
fonte

1

Per tutta la merda dei tavoli, a volte questa è la soluzione migliore

— Sean256

questa è stata la soluzione migliore per me

— bowlerae

Questa è davvero la soluzione migliore, poiché l'uso di elementi posizionati in modo assoluto in genere cambia l'altezza dell'elemento genitore

— hamncheez

7

funziona (ho provato solo ie & ff):

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

spero che aiuti.

— pstanton
fonte

5

La risposta pubblicata da Y. Shoham (utilizzando il posizionamento assoluto) sembra essere la soluzione più semplice nella maggior parte dei casi in cui il contenitore ha un'altezza fissa, ma se il DIV genitore deve contenere più DIV e regolare automaticamente l'altezza in base al contenuto dinamico, allora può esserci un problema. Avevo bisogno di due blocchi di contenuto dinamico; uno allineato alla parte superiore del contenitore e uno alla parte inferiore e sebbene potessi far sì che il contenitore si adattasse alle dimensioni del DIV superiore, se il DIV allineato al fondo fosse più alto, non ridimensionerebbe il contenitore ma si estenderebbe all'esterno . Il metodo delineato sopra da romiem che utilizza il posizionamento in stile tabella, sebbene un po 'più complicato, è più robusto sotto questo aspetto e ha consentito l'allineamento al fondo e la corretta altezza automatica del contenitore.

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

Mi rendo conto che questa non è una risposta nuova ma volevo commentare questo approccio in quanto mi ha portato a trovare la mia soluzione ma come novellino non mi è stato permesso di commentare, solo di postare.

— Nick Gillard
fonte

3

Probabilmente dovresti impostare il div figlio in modo che abbia position: absolute.

Aggiorna lo stile del tuo bambino a

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

— Ravia
fonte

ci ho provato, ma quello di cui ho bisogno è che la parte inferiore del childDiv si sieda nella parte inferiore della parentDiv, il grafico deve essere dinamico e le altezze varieranno da ogni childDiv al successivo ... il posizionamento potrebbe funzionare ma non lo faccio smettila di capire qualcosa di solido ...

— sia

5

non è una buona idea impostare il massimo a 207 (un numero arbitrario) meglio impostare il fondo: 0

— pstanton

2

Un vecchio post ma pensavo di condividere una risposta per chiunque cerchi. E perché quando usi le absolutecose possono andare storte. Quello che farei è

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

Il Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

E questo rimetterebbe quel div in basso di nuovo nel div genitore. sicuro anche per la maggior parte dei browser

Ciò renderebbe il childDiv metà nella parte inferiore del genitoreDiv. È necessario utilizzare almeno -40px sul margine superiore. Inoltre è la migliore pratica utilizzare position: relative; in questo caso per entrambi i div.

— Augus

1

Avevo qualcosa di simile e l'ho fatto funzionare aggiungendo efficacemente un po 'di imbottitura al bambino.

Sono sicuro che alcune delle altre risposte qui sarebbero arrivate alla soluzione, ma non sono riuscito a farle funzionare facilmente dopo molto tempo; Ho invece finito con la soluzione padding-top che è elegante nella sua semplicità, ma mi sembra un po 'hackish (per non parlare del valore del pixel che imposta dipenderebbe probabilmente dall'altezza del genitore).

— cellepo
fonte

0

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

Espandi lo snippet

Questa è la mia soluzione

— NEM
fonte

-6

Se hai più Div figlio all'interno del tuo Div genitore, puoi utilizzare la proprietà di allineamento verticale come di seguito:

.Parent div
{
  vertical-align : bottom;
}

— Pawan
fonte

Perché così tanti voti negativi per questo senza commenti? Non risolve il problema? La ricerca in linea suggerisce che dovrebbe.

— sholsapp