如何将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块，但它显示在顶部位置。 如何将iner块放在主外块的底部，就像在imege上一样？ 谢谢！

Answer 1

• 将position:relative;设置为父元素
• 将position:absolute;设置为内部元素

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用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 3

假设您的主要div宽度为500px且内部div的宽度为300px

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