将 div 定位在底部

Question

好的，我的问题是这样的。如何在不使用 margin-top 的情况下将子元素定位为主 div 内的另一个 div？请检查我的屏幕截图以更好地理解我的问题。

我的主 div 是 177 像素 x 177 像素。我的子 div 是 100 像素 x 25 像素，我需要在主 div 的底部以大约 20 像素的边距底部浮动。

谢谢， 理查德.

Answer 1

使用绝对定位。将主 div 定位到相对位置，然后将内部 div 定位到绝对位置，如下所示：

.main-div {
  position: relative;
  height: 177px;
  width: 177px;
}
.inner-div {
  position: absolute;
  right: 0;
  bottom: 20px;
  width: 100px;
  height: 20px;
}