class hai divs, một ở trên một ở phía dưới của một div thứ ba

Question

tôi có mã này:

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

Tôi muốn đặt div 1 ở phía trên, và div 2 ở dưới cùng của container, bất kể bao nhiêu chiều cao của container là. Làm thế nào tôi có thể làm như vậy?

Answer 1

Đặt vị trí của vùng chứa thành vị trí tương đối và vị trí của div 1 và 2 thành tuyệt đối. Sau đó thiết lập div 1 tới top: 0 và div 2 xuống dưới 0 (cũng tránh sử dụng số chỉ ID để tương thích 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

Bạn có thể thử bên dưới mã:

Working Demo here

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

Answer 3

Kết quả như vậy có thể đạt được bằng cách sử dụng flex properties. Cho dù chiều cao của container cao bao nhiêu, hai số div s sẽ luôn là một ở đầu & một ở phía dưới cùng.

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

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