Javascript 如何在右侧显示发送消息和在左侧显示接收消息？

我正在开发聊天应用程序。在这里我可以发送和接收消息。但我想在右侧显示发送消息，在左侧显示接收消息

var grp=angular.modulegpap，[] .controllergrpCtrl，函数$scope、$state、$http、$stateparms{ $scope.uName=$state.params.usermail； console.logbigid++$scope.digId； document.getElementByIdfrndName.innerHTML=Group； $scope.message=； $scope.messages=[]； /*图像上传*/ $profileImage.clickfunction e{ $imageUpload.click； }; 函数fasterPreviewuploader{ 如果uploader.files&&uploader.files[0]{ $'profileImage'.attr'src'， window.URL.createObjectURLuploader.files[0]； } } $imageUpload.changefunction{ 快速复习； }; /*图像上传结束*/ var socket=io'http://colourssoftware.com:3000/chat'; console.logsocket+socket； console.logdevi+插座； var username=$scope.uName； var noChat=0；//如果未加载所有聊天记录，则设置0。如果加载了所有聊天记录，则设置1。 var msgCount=0；//计算显示的邮件总数。 var oldInitDone=0；//未执行old chats init时为0，执行时为1。 var roomId；//设置房间的变量。 变温剂； //在连接上传递数据。 socket.on'connect'，函数{ socket.emit'set-user-data'，$scope.uName； console.logemissed+$scope.uName； }；//连接事件结束。 //接收联机堆栈。 socket.on'onlineStack'，函数堆栈{ $'list'。为空； $'list'.append$.append$.textGroup.css{ 字号：13px }; var totalOnline=0； 对于堆栈中的var用户{ //设置txt1。显示用户按钮。 如果用户==$scope.uName{ var txt1=$.textuser.css{ 字号：13px }; }否则{ var txt1=$.textuser.css{ 字号：13px }; } //设置txt2。显示联机状态。 如果堆栈[用户]==联机{ var txt2=$.text*+堆栈[user].css{ 对， 颜色：009933， 字号：13px }; totalOnline++； }否则{ var txt2=$.textstack[user].css{ 对， 颜色：A6， 字号：13px }; } //列出所有用户。 $'list'。追加$.appendtxt1，txt2； $'totalOnline'.texttotalOnline； }//结束对的访问。 $'scrl1'.scrollTop$'scrl1'.propscrollHeight； }；//接收onlineStack事件的结束。 //点击按钮功能。 $document.onclick，ubtn，函数{ //$scope.toUser=toUser； console.logusername+tuser； //空消息。 $'messages'。空； $‘打字’。文本； msgCount=0； noChat=0； oldInitDone=0； //为将要发送消息的朋友指定名称，如果是组，则其值为“组”。 toUser=$this.text； //显示和隐藏相关信息。 $'frndName'.texttoUser； $'initMsg'.hide； $'chatForm.show；//显示聊天表单。 $'sendBtn.hide；//隐藏发送按钮以防止发送空邮件。 //为聊天室指定两个名字。这有助于一对一和群聊。 如果toUser==组{ var currentRoom=组； var=Group； }否则{ var currentRoom=用户名+-+toUser； var=tuser+-+用户名； } //活动设置房间并加入。 插座。发射“设置房间”{ 名称1：当前房间， 名称2：反向eRoom }; console.logroom+currentRoom++eRoom； }; //用于设置roomId的事件。 插座。在“休息室”上，多功能厅{ //空消息。 $'messages'。空； $‘打字’。文本； msgCount=0； noChat=0； oldInitDone=0； //将房间id分配给roomId变量。这有助于 e-to-one和群聊。 roomId=房间； console.logroomId:+roomId； //单击按钮或设置聊天室时获取聊天历史记录的事件。 socket.emit'old-chats-init'{ 房间：室友， 用户名：$scope.uName， msgCount:msgCount }; $scope.deleteCht=函数{ $http{ 网址：'http://colourssoftware.com:3000/clearchat/“+室友， 方法：“删除”， }.然后{ //document.getElementByIdscrl2.value=； //data.result.length=0； console.logdel chat+JSON.stringifyres.data； }，函数错误{ console.logerrorblock+错误； }; } }; //布景室活动结束。 //滚动加载更多旧聊天记录。 $'scrl2'。滚动函数{ 如果$'scrl2'.scrollTop==0&&noChat==0&&oldInitDone==1{ $‘加载’。显示； socket.emit'old-chats'{ 房间：室友， 用户名：用户名， msgCount:msgCount }; } }; // 滚动事件结束。 //听老聊天事件。 socket.on'old-chats'，函数数据{ 如果data.room==roomId{ console.logname+JSON.stringifydata； oldInitDone=1；//将值设置为意味着旧聊天第一个事件已完成。 如果data.result.length！=0{ $'noChat.hide；//不再隐藏聊天信息。 对于变量i=0；i

关 朋友

-> document.div.style.backgroundImage=urlp.jpg； -> 聊天室

加载

不再显示聊天

！！…单击用户或组按钮开始聊天

---

只需为左右对齐的块创建两个类。当您显示此选项时，请将类添加到消息中。例如，对于您发送的邮件，请将项目左对齐。 但是，您不能忘记伪元素

.item--left-align {
  float: left;
}

.item--left-align:after,
.item--left-align:before {
  content: '';
  display: table;
  clear: both;
}

---

您需要它来控制元素，这些元素将使用以下组合更改其位置：

显示器：flex；弯曲方向：立柱；关于父母 对齐自我：flex endon子项 一切都应该很容易实现

.聊天{ 显示器：flex； /*列反转以进行聊天风格的消息排序*/ 弯曲方向：柱反向； } .留言{ 边框：1px纯色灰色； 保证金：5px； 填充物：5px； 宽度：60%； } .message.is-sent{ 背景：青色； /*使用对齐自我*/ 自对准：柔性端； } .message.is-received{ 背景：粉红色； } 收到-Lorem ipsum dolor sit amet，敬拜精英。圣乌拉姆省圣普罗维登特市，莫利提亚无肉之躯中的代表体Accusamus corporis delecutus！一个eos ipsum maiores quisquam vero？伊尼姆·尼希尔·奎斯夸姆·雷鲁姆。 已发送-Lorem ipsum Door sit amet，Concertetur Adipising Elite。圣乌拉姆省圣普罗维登特市，莫利提亚无肉之躯中的代表体Accusamus corporis delecutus！一个eos ipsum maiores quisquam vero？伊尼姆·尼希尔·奎斯夸姆·雷鲁姆。

---

这是你的全部申请吗？请仅发布相关代码或创建一个可用的plunker/fiddle。