Javascript 是否可以使用CSS将一个div放置在另一个div的顶部，从底部开始？

我有一个使用HTML、CSS和JS制作的聊天窗口。我想从下到上定位消息。 例子：

---

第一个消息div位于底部，第二个消息div位于第一个an顶部，依此类推。有可能吗？

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

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

$（':button'）。单击（函数（）{
var message=$（'input[type=text]'）。val（）；
$（'#chat'）。前置（''+消息）；
});

演示：

---

**我根据注释将

append

更改为

prepend

，您应该结合使用

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) );
});
​

$（':button'）。单击（函数（）{
var message=$（'input[type=text]'）。val（）；
$（'#chat'）。追加（$（''）.text（message））；
});
​

如果有问题，请告诉我

这是

我一直在寻找更好的解决方案，因为我总是怀疑表格布局，但我发现了，他们也和我一样。。所以我想这个解决方案是正确的

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

由于新消息将出现在底部，我们需要保持滚动到底部。

---

我更新了fiddle链接

您可以使用jQuery这样做

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

要处理多个元素，可以执行以下操作：

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

是一个工作现场演示。

---

<>我知道这不是你的问题的答案，相反，这是一个更好的选择，你应该考虑在聊天窗口中实现。

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

接下来，您可以使用css来完成这一切： 因为这样的设计需要使用表行或列表元素 显然，使用ajax必须使用javascript，这样才能异步获取用户记录，如消息和概要文件等

---

CSS:

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

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

表#聊天窗口{
}
tr#消息行{
}
td#剖面图{
}
td#信息{
}

HTML结构：

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

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

或使用列表：

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

<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获取值并添加子项：

如果您使用的是基于表的聊天窗口，那么您必须使用javascript获取表id，并为获取的每个值/消息添加行元素

如果您使用的是基于列表的聊天窗口，那么您必须使用javascript获取列表id，并为获取的每个值/消息添加列表元素

。

---

---

很抱歉，如果有任何打字错误，我的时间就少了。

是的，但是你能在js fiddle上更新它吗，或者告诉我你尝试了什么吗？我知道一种方法-只有css-但在我看来，一定有更好的方法。我会做一把小提琴并把它贴在这里。给我几分钟。这似乎是你的邮件从上到下的重复。问题是自下而上。