如何把div元素放到另一個div元素的底部

Question

我有兩個div元素。我想知道如何做到以下幾點：

我有HTML和CSS：

<div class="main"> 
     <div class="iner"></div> 
    </div> 

而且

.main{ 
    width: 1000px; 
    height: 500px; 
    background-color: #111210; 

} 

.iner{ 
    width: 250px; 
    height: 250px; 
    background-color: #34cb2f; 
    margin: 0 auto; 
    bottom: 0; 
} 

這個CSS代碼中心核能研究所塊，但它在頂部位置顯示。 如何將iner塊放在主外塊的底部，就像在imege上一樣？ 謝謝！

Answer 1

使用Flexbox的：

.main { 
    width: 1000px; 
    height: 500px; 
    background-color: #111210; 
    display: flex; 
    justify-content: center; 
} 

.inner { 
    width: 250px; 
    height: 250px; 
    background-color: #34cb2f; 
    align-self: flex-end; 
} 

https://jsbin.com/yuwubutiqi/

Answer 2

• 設置position:relative;到父元素
• 設置position:absolute;到內元素

.main{ 
 
    position:relative; /* ADD THIS! */ 
 
    height: 200px; 
 
    background-color: #111210; 
 
} 
 

 
.iner{ 
 
    position:absolute; /* ADD THIS! */ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #34cb2f; 
 
    bottom: 0; 
 
    /* some centering now... */ 
 
    left:50%; 
 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 
}

<div class="main"> 
 
    <div class="iner"></div> 
 
</div>

Answer 3

假設你的主要div的寬度爲500像素和內部div的寬度爲300像素

.main{ 
     width:500px; 
     height:auto:margin:auto; 
     background-color:green; 
     border:1px solid #000000; 
     min-height:500px;position:relative 
     } 

.inner{ 
     width:300px; 
     height:auto; 
     min-height:300px; 
     background-color:yellow; 
     position:absolute; 
     bottom : 0; 
     margin-right:100; 
     margin-left:100px" 
     }