是否可以使用CSS从底部开始将div放在另一个上面？

Question

我有一个使用HTML，CSS＆amp; amp; JS。我想从下到上定位消息。 例： 第一个消息div位于底部，第二个消息div位于第一个顶部，依此类推。有可能吗？

Answer 1

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

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

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

**我根据评论

将append更改为prepend

Answer 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>

或使用LISTS：

<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>。

   ---

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

Answer 3

你可以使用像jQuery这样的;

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

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

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

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

Answer 4

您应该使用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) );
});
​

如果有问题，请告诉我。

这是fiddle

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

添加 - 滚动到底部代码

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