在DIV的现有内容的左侧添加HTML

Question

我目前在页面的右下角有一个div,我希望它能够被修复,这样当用户滚动,重新调整大小等时,div总是位于可见浏览器的右下角.我已经这样做了:

HTML:

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

CSS:

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

到现在为止还挺好.现在,使用jQuery,我想向这个div添加HTML,并将它显示在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>");

工作演示