聊天框的定位

Question

我正在开发类似于Facebook的聊天功能。我在定位多个聊天框时遇到问题。

您会在底部看到2个聊天框。我用容器附上所有聊天框，每个聊天框都动态地附加在该容器内，并且工作正常。但是我提供了一个折叠聊天框的选项，这就是我崩溃时发生的事情（第二个聊天框）

标签显示在容器的顶部，但我希望它位于底部（如facebook）。我尝试了位置：绝对有效，但后来我不能使用浮点数来附加其他聊天框（我必须计算位置，我尝试了这种方式并不是很好）。

<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

Answer 2

我会给你简单的答案。无需使用任何东西。

从两个＆＃34; taprofilechatbox DIV ＆＃34;中删除 FLOAT：LEFT 并添加 display：inline-block 。

作为您的代码＆＃34; taprofilechatbox DIV ＆＃34;是动态的。只需删除你的内联浮点数：右键并在那里添加 display：inline-block 。

你可以感觉一切都会好起来的。 请看下面给出的代码段。

＆＃13;

＆＃13;

<div class="chatbox_container" style="position:fixed;bottom:0px;right:0px;z-index:10000;">
  <!--[if lte IE 6]><html class="ie6 no-js"><!--[if gt IE 8]><!-->
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes">
  <meta charset="utf-8">
  <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]-->
  <title>Tech Ahoy - Voicing Technology To The World</title>
  <!-- change this div to below div, remove float:right and add DISPLAY:INLINE-BLOCK <div class="taprofilechatbox" style="float:right;margin-left:20px;/* vertical-align: bottom; */position: relative;/* top: -1px; */" data-threadid="3a6cc9bd810" data-vuid="66143ccc50">-->
  <div class="taprofilechatbox" style="display:inline-block;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>
  <script type="text/javascript">
    var mychatbox = $('.taprofilechatbox[data-threadid="3a6cc9bd810"]'); /*if(window.totchatbox==1) { rpos=150; } else { rpos=(window.totchatbox*150)+130; } mychatbox.css("right",rpos);*/
    var loadobj = new JS_LOADER();
    var tarea = $('.chatbx_footertarea[data-threadid="3a6cc9bd810"]');
    tarea.on("keyup", function(e) {
      var mytarea = $(this);
      if (e.keyCode == 13 && !e.shiftKey) {
        e.preventDefault();
        var themsg = mytarea.val();
        console.log("SENT:" + themsg);
        var tid = "3a6cc9bd810";
        var uid = "66143ccc50";
        loadobj.ajax_call({
          url: "/request_process.php",
          method: "POST",
          data: {
            mkey: "tbx_threadmsg",
            tid: tid,
            uid: uid,
            msg: themsg
          },
          cache: false,
          success: function(data) {
            mytarea.val("");
            console.log("MSG SENT");
          }
        });
        return false;
      } else if (e.keyCode == 13 && e.shiftKey) {
        process_tarea(mytarea);
      }
    });
  </script>
  <!--[if lte IE 6]><html class="ie6 no-js"><!--[if gt IE 8]><!-->
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes">
  <meta charset="utf-8"> 
  
  <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]-->
  <title>Tech Ahoy - Voicing Technology To The World</title>
  <!--change this div to below div, remove float:right and add DISPLAY:INLINE-BLOCK <div class="taprofilechatbox" style="float:right;margin-left:20px;" data-threadid="c12b84157" data-vuid="66143ccc50">-->
    <div class="taprofilechatbox" style="display:inline-block;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>
  <script type="text/javascript">
    var mychatbox = $('.taprofilechatbox[data-threadid="c12b84157"]'); /*if(window.totchatbox==1) { rpos=150; } else { rpos=(window.totchatbox*150)+130; } mychatbox.css("right",rpos);*/
    var loadobj = new JS_LOADER();
    var tarea = $('.chatbx_footertarea[data-threadid="c12b84157"]');
    tarea.on("keyup", function(e) {
      var mytarea = $(this);
      if (e.keyCode == 13 && !e.shiftKey) {
        e.preventDefault();
        var themsg = mytarea.val();
        console.log("SENT:" + themsg);
        var tid = "c12b84157";
        var uid = "66143ccc50";
        loadobj.ajax_call({
          url: "/request_process.php",
          method: "POST",
          data: {
            mkey: "tbx_threadmsg",
            tid: tid,
            uid: uid,
            msg: themsg
          },
          cache: false,
          success: function(data) {
            mytarea.val("");
            console.log("MSG SENT");
          }
        });
        return false;
      } else if (e.keyCode == 13 && e.shiftKey) {
        process_tarea(mytarea);
      }
    });
  </script>
</div>

＆＃13;

＆＃13;

＆＃13;