小贝子编程

在运行时向html主体追加div是相互重叠的



这是基本实现的工作柱塞。问题是，聊天div在运行时使用$compile被添加到正文，但他们继承了相同的css类，所以彼此重叠，即:

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

我需要添加什么css，这样它们就可以侧向打开，而不是相互重叠。

请帮个小忙

也许在聊天窗口周围添加一个包装器并固定位置，然后浮动聊天窗口div的自己?类似(未测试):

1。固定包装与浮动子

<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;
}

试试这个柱塞计算盒子计数，并相应地提供其位置

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)
  )

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium