數據顯示在聊天框

Question

頂部我有一個聊天信息，並獲取位置數據，格

ORDER BY message_id DESC LIMIT 10 

DATAS取出來說明和限制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; 
}