Alinear div en la parte inferior de la div principal

Question

Tengo dos divs, uno dentro del otro y me gustaría que el div pequeño se alinee en el extremo de la div principal.

Aquí está mi código hasta ahora. Actualmente, el botón está en la parte superior del div principal, en cambio quiero que se ubique en la parte inferior. Cualquier ayuda sería apreciada.

.vertical_banner { 
    border: 1px solid #E9E3DD; 
    float: left; 
    height: 210px; 
    margin: 2px; 
    padding: 4px 2px 10px 10px; 
    text-align: left; 
    width: 117px; 
} 

#bottom_link{ 
vertical-align: bottom; 
} 

Así es como he estado tratando de usarlo, pero como se puede ver todavía soy nuevo en CSS :)

<div class="vertical_banner"> 
    <div id="bottom_link"> 
     <input type="submit" value="Continue"> 
     </div> 
</div> 

Answer 1

Modificar la CSS como esto:

.vertical_banner { 
 
    border: 1px solid #E9E3DD; 
 
    float: left; 
 
    height: 210px; 
 
    margin: 2px; 
 
    padding: 4px 2px 10px 10px; 
 
    text-align: left; 
 
    width: 117px; 
 
    position:relative; 
 
} 
 

 
#bottom_link{ 
 
    position:absolute;     /* added */ 
 
    bottom:0;       /* added */ 
 
    left:0;       /* added */ 
 
}

<div class="vertical_banner"> 
 
    <div id="bottom_link"> 
 
     <input type="submit" value="Continue"> 
 
     </div> 
 
</div>

Answer 2

supongo que necesitará posición absoluta

.vertical_banner {position:relative;} 
#bottom_link{position:absolute; bottom:0;} 

Answer 3

Esto no es posible en HTML a menos que use un posicionamiento absoluto o javascript. Por lo que una solución sería la de dar a este CSS para #bottom_link:

#bottom_link { 
    position:absolute; 
    bottom:0; 
} 

De lo contrario, tendría que utilizar algo de JavaScript. Aquí hay un bloque jQuery que debería hacer el truco, dependiendo de la simplicidad de la página.

$('#bottom_link').css({ 
    position: 'relative', 
    top: $(this).parent().height() - $(this).height() 
}); 

Answer 4

Da tu div padre position: relative, a continuación, dar a su hijo div position: absolute, esta posición absoluta voluntad del div dentro de su matriz, entonces se puede dar al niño bottom: 0px;

Véase el ejemplo aquí:

http://jsfiddle.net/PGMqs/1/

Answer 5

Por favor, intente esto:

#b { 
display: -webkit-inline-flex; 
display: -moz-inline-flex; 
display: inline-flex; 

-webkit-flex-flow: row nowrap; 
-moz-flex-flow: row nowrap; 
flex-flow: row nowrap; 

-webkit-align-items: flex-end; 
-moz-align-items: flex-end; 
align-items: flex-end;} 

Aquí hay una demostración de JSFiddle: http://jsfiddle.net/rudiedirkx/7FGKN/.