jquery - 在DIV现有内容左侧添加HTML

Question

我目前在页面的右下角有一个 div，我希望它被修复，以便当用户滚动、调整大小等时 div 始终位于可见浏览器的右下方。我已经这样做了:

HTML:

 <div id="chats-div"></div>

CSS:

#chats-div
{
    position:fixed;
    bottom:0;
    right:0;
    z-index: 100;
}

到目前为止一切顺利。现在，使用 jQuery，我想将 HTML 添加到这个 div，并让它出现在 div 中已有内容的左侧，所以我正在尝试这个(通过按下按钮):

jQuery:

$('#chats-div').prepend("<div style='height:100px;width:50px;border:1px;border-style:solid;background-color:White;'>Div Contents</div>");

但是，每次我按下按钮时，新的 HTML 都会添加到之前的 div 之上(顶部)，而不是添加到它的左侧。

我基本上是在尝试重新创建一个 gmail/facebook 风格的聊天。我想在任何现有聊天窗口的左侧添加一个新的聊天窗口，同时将整个聊天部分保留在右下角。我知道我很接近，并且花了太多时间尝试谷歌搜索/自己弄清楚。

在此先感谢您的帮助!

Answer 1

您应该只需要将 float: left; 添加到您创建的 div 中，如下所示:

CSS:

.chat
{
   height:100px;
   width:50px;
   border:1px;
   border-style:solid;
   background-color:White; 
   float:left;             /*Added to make them float alongside each other. */
}

前置函数:

$('#chats-div').prepend("<div class='chat'>Div Contents</div>");

Working Demo