Question

我有2个案例：在一个父亲是相对定位和底部对齐工作正常在第二个父级是绝对定位，底部对齐不起作用！？

有办法吗？

<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并为“container”添加了一个宽度，并添加了float：left to“message”。

希望这是你可以使用的答案：）

在父母绝对定位的垂直对齐div到底部

1 个答案: