jquery - 在div的底部写一段

Question

我正在尝试构建类似聊天的东西，我希望用户在文本区域内输入的内容将显示在特定 div 的底部，而较旧的消息则显示在其上方。

我尝试了一些东西，但没有成功。

#chatlog {
    display: table-cell;
    vertical-align: bottom;
    border: 1px solid #f00;
    max-height: 500px;
    table-layout: fixed;
    overflow-y: scroll;
    background-color: #00FFFF;
    width: 1400px;
    height: 500px;
}

这是html代码:

<div class="chat-log-wrapper">
    <div id="chatlog"></div>
</div>

<div class="input-text">
    <div class="area">
        <textarea rows="2" type="text" id="message_input">
        </textarea>
        <button id="send-message">send</button>
    </div>
</div>

javascript(从其他客户端接收消息并将其附加):

socketio.on("message_to_client", function (data) {
    $('#chatlog').append("<p>"+data["message"]+"</p>")
});

似乎 display:table-cell 正在破坏 overflow-y。

Answer 1

您还可以查看 display:flex; 和 flex-direction:column-reverse;。

DEMO

教程中的更多信息:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

在 W3C:(最新草案？)http://dev.w3.org/csswg/css-flexbox/