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

我目前在页面的右下角有一个div，我希望它是固定的，这样当用户滚动，重新调整尺寸等时div始终位于可见浏览器的右下角。我已经做到了这一点：在DIV的现有内容的左侧添加HTML

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风格的聊天。我想在任何现有聊天窗口的左侧添加一个新的聊天窗口，同时将整个聊天部分保留在右下角。我知道我很接近，并且花费了太多的时间尝试Google自己/找出它。

在此先感谢您的帮助！

来源

2011-08-10 MattW

你应该只需要添加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

来源

2011-08-10 19:47:44

+1很好做。 –

+1好一个。虽然生病更喜欢将它分配给div，然后使用css – kritya

我强烈推荐一个类，以及:)我会更新演示的可读性。 –

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

来源

2011-08-10 19:46:22 Alf

哈哈哦井...别人有一个更好的答案，但它的价值。

$('#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/

来源

2011-08-10 19:52:55

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

回答

相关问题