allineare due div, uno in alto uno, in fondo, di una terza div

Question

ho questo codice:

<div id="container"> 
    <div id="1"> div 1</div> 
    <div id="2"> div 2</div> 
</div> 

voglio mettere div 1 in alto, e div 2 in fondo container, non importa quanto l'altezza di container è. Come posso farlo?

Answer 1

Impostare la posizione del contenitore su relativo e la posizione di div 1 e 2 su assoluto. Quindi impostare div 1 verso l'alto: 0 e div 2 verso il basso 0 (anche evitare di utilizzare il numero solo ID per compatibilità CSS):

jsFiddle example

#container { 
    position:relative; 
    height:100px; 
    width:100px; 
    border:1px solid #999; 
} 
#div1, #div2 { 
    position:absolute; 
} 
#div1 { 
    top:0 
} 
#div2 { 
    bottom:0; 
} 

Answer 2

si può provare sottostante Codice:

Working Demo here

<div id="container"> 
    <div id="div1">div 1</div> 
    <div id="div2">div 2</div> 
</div> 

Answer 3

Tali risultati possono essere realizzare utilizzando flex properties. Indipendentemente dall'alta altezza dello container, i due s saranno sempre uno in cima & un altro in basso.

#container { 
    display: flex; 
    justify-content:space-between; 
    flex-direction:column; 
    background-color: lightgrey; 
} 

#id{ 
    background-color: cornflowerblue; 
    width: 100px; 
    margin: 10px; 
}