Căn chỉnh Div ở dưới cùng trên chính Div

Question

Tôi có hai div, một bên trong khác và tôi muốn div nhỏ được căn chỉnh ở phần mông của div chính.

Đây là mã của tôi cho đến thời điểm này. Hiện tại, nút ở trên cùng của div chính, thay vào đó tôi muốn nó được đặt ở dưới cùng. Bất kỳ trợ giúp sẽ được đánh giá cao.

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

Đây là cách tôi đã cố gắng để sử dụng nó, nhưng như bạn thấy tôi vẫn còn mới để CSS :)

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

Answer 1

Sửa đổi CSS của bạn như thế này:

.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

Tôi đoán bạn sẽ cần vị trí tuyệt đối

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

Answer 3

Điều này không thực sự có thể trong HTML trừ khi bạn sử dụng định vị tuyệt đối hoặc javascript. Vì vậy, một giải pháp là cung cấp CSS này cho #bottom_link:

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

Nếu không, bạn phải sử dụng một số javascript. Đây là một khối jQuery mà nên làm các trick, tùy thuộc vào sự đơn giản của trang.

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

Answer 4

Cho div cha mẹ của bạn position: relative, sau đó cung cấp cho con div của bạn position: absolute, ý vị trí tuyệt đối này div bên trong của mẹ nó, sau đó bạn có thể cung cấp cho các con bottom: 0px;

Xem ví dụ ở đây:

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

Answer 5

Hãy thử cách này:

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

Đây là bản trình diễn JSFiddle: http://jsfiddle.net/rudiedirkx/7FGKN/.