Question

Here is the working plunker which is almost implemented。问题是聊天div在运行时使用$compile添加到正文中，但它们继承了相同的css类，因此彼此重叠，即：

 .chat-window{
            bottom:0;
            position:fixed;
            float:right;
            margin-left:10px;
  }

我需要添加什么css，以便它们彼此打开而不是相互重叠。

请帮忙

Answer 1

也许在聊天窗口周围添加一个包装器并修复位置，然后浮动聊天窗口div？s？像（未经测试）的东西：

<强> 1。固定包含漂浮儿童的包装

<强> HTML

<div class="chat-wrapper">
   <div class="chat-window"></div>
   <div class="chat-window"></div>
   <div class="chat-window"></div>
</div>

<强> CSS

.chat-wrapper {
  position: fixed;
  bottom: 0;
}

.chat-window {
  position: relative;
  float: left;
  margin-left: 10px;
}

<强> 2。 Flexbox解决方案

<强> CSS

.chat-wrapper {
   position: fixed; 
   bottom: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

Answer 2

尝试this plunker计算方框数并相应地提供其位置

var setPixel = function (chatWindowNumber) {
            if (chatWindowNumber > 0) {
                return (chatWindowNumber * 410) + 'px';
            } else {
                return 0;
    }

  };

并附加如下：

angular.element(document.getElementById('main-html-body')).append(
      $compile("<div chat-box \n\
                    id=" + scope.user + "\n\
                     class='row chat-window col-xs-5 col-md-3' \n\
                       incoming-msg='incomingMsg' \n\
                         open-chat-user-list='openChatUserList' \n\
                            user='user' \n\
                           count='count' style='position: fixed;bottom:0; right: " + setPixel(scope.count.p) + "'></div>"
         )(scope)
  )

在运行时将div添加到html主体彼此重叠

2 个答案: