1

2 つのケースがあります: 1 つの親では相対配置で下揃えが機能します。

回避策はありますか？

<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/

4

1 に答える 1

4

こんなこと思いませんか？

#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 を「message」に追加しました。

これがあなたが使用できる答えであることを願っています:)

于 2013-09-16T20:03:30.403 に答える