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 中已经存在的内容的左侧，所以我正在尝试这个（从按下按钮）：< / p>

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

Answer 2

您是否尝试将宽度设置为#chats-div？也许是100%。还float您的新div，或者display:inline / display:inline-block。

Answer 3

大声笑哦......其他人有更好的答案，但是值得的。

$('#chats-div').prepend("<div style='position:absolute;right:"+$("#chats-div").children().length*100+"%;height:100px;width:50px;border:1px;border-style:solid;background-color:White;'>Div Contents</div>");

http://jsfiddle.net/xZLf5/

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

3 个答案: