Wyrównanie Div u dołu głównego Div

Question

Mam dwa divy, jeden w drugim i chciałbym, aby mały div był wyrównany na końcu głównego div.

Oto mój kod do tej pory. Obecnie przycisk znajduje się na górze głównego div, zamiast tego chcę go umieścić na dole. Każda pomoc będzie doceniona.

.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; 
} 

Oto jak próbowałam go używać, ale jak widać wciąż jestem nowy w CSS :)

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

Answer 1

modyfikować swój CSS tak:

.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

Chyba trzeba absolutną pozycję

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

Answer 3

To nie jest tak naprawdę możliwe w HTML, chyba że używasz pozycjonowania absolutnego lub javascript. Więc jednym rozwiązaniem byłoby dać ten CSS #bottom_link:

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

W przeciwnym razie trzeba by użyć niektórych javascript. Oto blok jQuery, który powinien załatwić sprawę, w zależności od prostoty strony.

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

Answer 4

Podaj swój nadrzędny div position: relative, następnie dać div dziecko position: absolute, będzie to pozycja bezwzględna div wewnątrz swojego rodzica, można dać dziecku bottom: 0px;

Zobacz przykład tutaj:

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

Answer 5

spróbuj tego:

#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;} 

Oto demo JSFiddle: http://jsfiddle.net/rudiedirkx/7FGKN/.