Question

我有一条聊天消息，提取数据并放在div

中

ORDER BY message_id DESC LIMIT 10

数据取出desc并限制10并使用while循环输出所有数据。

现在数据从上到下。

但是我需要从下到上的数据显示

所以更新消息将显示在底部。

Answer 1

您需要的是display: table;和display: table-cell;属性

div.wrap {
    display: table;
    height: 300px;
    width: 200px;
    background: #eee;
}

div.cell {
    display: table-cell;
    vertical-align: bottom;
    padding: 5px;
}

div.cell span {
    display: block;
    padding: 5px;
}

Demo

Answer 2

此处我的解决方案为display: flex

<div class="messages-scroller">
  <div>
    <div class="spacer"></div>
    <div class="messages">
      <div class="message">Test</div>
    </div>
  </div>
</div>

.messages-scroller {
    position: relative;
    overflow-y: auto;
}

.messages-scroller > div {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    min-height: 100%;
}

.spaser {
    flex: 1 1 auto;
}

.messages {
    flex: 0 1 auto;
}

在聊天框中从下到上显示div中的数据

2 个答案: