html - 将 div 定位在 “absolute” 的底部

Question

我无法定位我的 div。我想让我的 child div 贴在 parent div 的底部，grandchild_1 和 grandchild_2 保持正确放。就此而言，我的意思是在 grandchild_2 之前有 grandchild_1，如图所示。

这是我试过的，但是“子”div 粘在顶部:

#parent {
   position: relative;
}

#child {
   position: absolute; bottom: 0;
}



<div id="parent">
    <div id="child">
        <div id="grandchild_1">
        </div>
        <div id="grandchild_2">
        </div>
    </div>
</div>

有人知道我应该如何进行吗？谢谢!

Answer 1

如果您在父级上指定高度，它将粘在底部。

示例:http://codepen.io/anon/pen/wGqzVd

HTML

<div id="parent">
  Parent
  <div id="child">
    Child
    <div id="grandchild_1">
      Grandchild 1
    </div>
    <div id="grandchild_2">
      Grandchild 2
    </div>
  </div>
</div>

CSS

div {
  padding: 5px;
}

#parent {
  position: relative;
  background: lightgray;
  height: 200px;
  width: 150px;
}

#child {
  position: absolute;
  bottom: 5px;
  background: yellow;
}

#grandchild_1 {
  background: pink;
}

#grandchild_2 {
  background: lightblue;
}