css - 垂直对齐 div 到父级绝对定位的底部

Question

我有两种情况：在一个父级中是相对定位并且底部对齐工作正常在第二个父级中是绝对定位并且底部对齐不起作用！？

有办法吗？

<style>
#container {
  height: 300px;
  border: 1px solid;
  padding: 5px;
  display: table-cell;
  vertical-align: bottom;
  position: absolute;
}
.message {
  border: 1px solid;
  margin-top: 5px;
}
</style>

<p>Top of page</p>
<div id="container">
<div class="message">Message 4</div>
<div class="message">Message 3</div>
<div class="message">Message 2</div>
<div class="message">Message 1</div>
</div>
<p>Bottom of page</p>

这是第一种情况的小提琴（相对位置#container）：http: //jsfiddle.net/arunpjohny/49RqX/1/

和容器具有绝对位置的相同小提琴：http: //jsfiddle.net/49RqX/61/

Answer 1

你有这样的想法吗？

#container {
    height: 300px;
    width: 70px;
    border: 1px solid;
    padding: 5px;
    display: table-cell;
    vertical-align: bottom;
    /*position: absolute;*/
}

.message {
    border: 1px solid;
    margin-top: 5px;
    float: left;
}

http://jsfiddle.net/Zwipper/eSEc4/

我已经删除了 position: relative 并为“容器”添加了一个宽度，并将 float:left 添加到“消息”。

希望这是您可以使用的答案:)