5

我有一个使用 HTML、CSS 和 JS 制作的聊天窗口。我想将消息从下到上定位。示例：底部的第一个消息 div，第一个顶部的第二个消息 div 依此类推。可能吗？

4

4 回答 4

2

在此处输入图像描述

我知道这不是您问题的答案，而是您应该考虑在聊天窗口中实施的更好选择。

最新的评论应该在底部，这就是大多数基本聊天窗口的工作方式。

接下来，您可以使用 css 来完成这一切： 因为这样的设计需要使用表格行或列表元素 显然您必须使用 javascript 来使用 ajax，以便您可以异步获取消息和个人资料图片等用户记录

CSS：

<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>

HTML结构：

<table id="chat_window">
  <tr id="message_row">
    <td id="profile_pic"></td>
    <td id="message"></td>
  </tr>
</table>

或使用列表：

<ul id="chat_window">
  <li id="message_row">
    <div id="profile_pic"></div>
    <div id="message"></div>
  </li>
</ul>

现在你只需要使用 javascript:ajax 来获取值并添加一个孩子：

  1. 如果您使用的是基于表格的聊天窗口，那么您必须使用 javascript 获取表格 ID，并<tr>为您获取的每个值/消息添加行元素。
  2. 如果您使用基于列表的聊天窗口，那么您必须使用 javascript 获取列表 ID，并<li>为您获取的每个值/消息添加列表元素。

如果有任何错别字，我很抱歉，我的时间更少。

于 2012-08-11T14:50:12.817 回答
2

我无法想象一个纯 CSS 解决方案。但是使用 jQuery，如果你的项目已经有了这个库，你可以这样写：

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').prepend('<div class="line">'+message);
});

演示：http: //jsfiddle.net/Vbd67/1/

**我根据评论更改append为prepend

于 2012-08-11T11:33:52.627 回答
1

你可以使用 jQuery 来做到这一点；

var first = $('div > div:first-child');
first.appendTo(first.parent());

要处理几个元素，您可以这样做：

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

这是一个有效的现场演示。

于 2012-08-11T12:29:55.077 回答
0

您应该使用display:table-cell和的组合vertical-align:bottom。我使用 Sotiris 的小提琴并修复了它的 CSS。

HTML是

<div  style="display:table; height:200px;">
    <div style="display:table-row">
            <div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
            </div>
    </div>

</div>
<input type="text"><input type="button" value="post">
​

这是 JavaScript 代码

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').append( $('<div/>').text(message) );
});
​

如果有问题，请告诉我。

这是小提琴

我一直在寻找更好的解决方案，因为表格布局对我来说总是很可疑，但是我发现了关于它的 css-tricks 文章，它们和我做的一样......所以我想这个解决方案是正确的。

添加 - 保持滚动到底部代码

由于底部有新消息，我们需要保持滚动到底部。我更新了小提琴链接

于 2012-08-11T11:54:53.267 回答