Jquery聊天框 - 显示DIV底部的第一条消息

Question

我有一个发送和接收消息的聊天DIV.

目前消息从DIV的顶部开始并向下处理DIV(以红色显示),当它们到达底部时,它们会被Jquery向上推,如下所示:

.scrollTop(activeConversationsDIV[0].scrollHeight);

我想询问是否有方法在DIV底部启动消息？这对用户来说更有意义,因为他们会看到他们在键入的位置附近键入的内容.

有没有办法从DIV底部开始向上工作的消息流？

谢谢

Answer 1

你可以使用display: table,display: table-cell和vertical-align: bottom.

这是一个例子:

http://jsfiddle.net/ktpRK/

CSS

#chat {
    display: table;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

.chatMessage {
    display: table-cell;
    vertical-align: bottom;
}

HTML

<div id="chat">
<div class="chatMessage">
    <p>test</p>
    <p>test 2</p>
</div>
</div>