我正在使用类似于Facebook的聊天框功能。我在放置多个聊天框时遇到问题。
您会在底部看到2个聊天框。我将所有聊天框都用一个容器括起来，每个聊天框都动态地附加在该容器内，并且工作正常。但是我提供了一个折叠聊天框的选项，这就是我折叠时发生的情况（第二个聊天框）
标签显示在容器的顶部，但我想在底部（例如facebook）。我尝试了position：absolute，它可以工作，但后来我无法使用float来附加其他聊天框（我必须计算位置，并且我尝试过这种方法但效果并不理想）。
<div class="chatbox_container" style="position:fixed;bottom:0px;right:0px;z-index:10000;">
<div class="taprofilechatbox" style="float:right;margin-left:20px;/* vertical-align: bottom; */position: relative;/* top: -1px; */" data-threadid="3a6cc9bd810" data-vuid="66143ccc50">
<div class="tachatboxlabel">
<img src="/media/usermedia/tvabhinav_3eca38fa3ed80d6/gal/e8cab7c70fc33368e/t_3488db6987a093_80x80.jpg" height="30">abhinav tv <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span>
</div>
<div class="tachatboxcont well" style="display: none;">
<div class="chatbx_headercontrol">
<div class="btn-group">
<button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i>
</button>
<button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i>
</button>
<button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i>
</button>
<button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i>
</button>
<button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i>
</button>
<button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i>
</button>
<button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i>
</button>
<div class="dropdown pull-left">
<button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Mute this conversation</a>
</li>
<li><a href="#">Delete this conversation</a>
</li>
<li><a href="#">Archive this conversation</a>
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="chatbx_threads">
<img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right">
<div class="convbx_bubble_right pull-right">tests</div>
<div style="clear:both;"></div>
<img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right">
<div class="convbx_bubble_right pull-right">hi how are u? i am fine</div>
<div style="clear:both;"></div>
</div>
<div class="chatbx_footercontrol">
<textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="3a6cc9bd810"></textarea>
</div>
</div>
</div>
<div class="taprofilechatbox" style="float:right;margin-left:20px;" data-threadid="c12b84157" data-vuid="66143ccc50">
<div class="tachatboxlabel">
<img src="/media/usermedia/tvvenkat_951120/gal/a6f666f8004c7/t_4f39ebb07d68fa062467280d1cf8_80x80.jpg" height="30">Hello <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span>
</div>
<div class="tachatboxcont well">
<div class="chatbx_headercontrol">
<div class="btn-group">
<button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i>
</button>
<button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i>
</button>
<button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i>
</button>
<button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i>
</button>
<button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i>
</button>
<button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i>
</button>
<button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i>
</button>
<div class="dropdown pull-left">
<button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Mute this conversation</a>
</li>
<li><a href="#">Delete this conversation</a>
</li>
<li><a href="#">Archive this conversation</a>
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
<div class="chatbx_threads">
<img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right">
<div class="convbx_bubble_right pull-right">Holla</div>
<div style="clear:both;"></div>
<img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right">
<div class="convbx_bubble_right pull-right">How are u</div>
<div style="clear:both;"></div>
<img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right">
<div class="convbx_bubble_right pull-right">hi pa</div>
<div style="clear:both;"></div>
</div>
<div class="chatbx_footercontrol">
<textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="c12b84157"></textarea>
</div>
</div>
</div>
</div>我只插入了chatbox片段，没有CSS和其他内容。如何放置聊天框，使其折叠时标签会显示在底部。
如果代码没有意义，则检查元素并将动态加载的内容粘贴到代码中。
最佳答案
好的，看看我为您完成的[mcve]。已添加边框以更好地说明：
* {box-sizing: border-box;}
.chat-container {position: fixed; bottom: 0; right: 0; border: 1px solid #99c;}
.chat-container .chat-box {border: 1px solid #66f; display: inline-block; width: 175px; vertical-align: bottom;}
.chat-container .chat-box .chat-head {background-color: #99f;}<div class="chat-container">
<div class="chat-box">
<div class="chat-head">Person Name</div>
<div class="chat-cont">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ex totam, quis itaque maiores, aut quam optio nihil nesciunt voluptatibus sit quae, minus officiis ipsa amet expedita eum provident quidem?</p>
</div>
</div>
<div class="chat-box">
<div class="chat-head">Person Name (Closed)</div>
</div>
</div>我能够用简单的三个规则来实现您想要做的跨浏览器版本。看看它，活着。
输出：http://output.jsbin.com/kovoritobo