javascript - 聊天框的定位

Question

我正在开发类似于 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>

我单独插入了聊天框片段，没有使用 CSS 和其他内容。如何定位聊天框，使其在折叠时标签显示在底部。

如果代码没有意义，我会检查元素并将动态加载的内容粘贴到代码中。

Answer 1

好的，看看我为你做的[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