如何把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" 
     }