Question

你好我和Javascript聊天了，现在我希望发送消息显示在左边，而接收显示在右边。 HTML

<div id="chatHtml" style="display: none;">
        <link rel="stylesheet" href="style/main.css">
        <div id=chatOutput class="chat-output"></div>
        <textarea class="form-control" rows="1" id="input-text-chat" placeholder="Enter Text Chat"></textarea> 
        <div id="chat-container">
        </div>
    </div>

Javascript

 openChat: function(){
        win =window.open('','myconsole',
        'width=450,height=500'
        +',menubar=0'
        +',toolbar=1'
        +',status=0'
        +',scrollbars=1'
        +',resizable=1')
        win.document.writeln("<body style='background-color:#ecf0f1'></body>");
        chat = document.getElementById("chatHtml").innerHTML;
        win.document.write(chat);
        win.document.title = "Live Chat"; 

    win.document.getElementById('input-text-chat').onkeyup = function(e) {
    if (e.keyCode != 13) return;
    // removing trailing/leading whitespace
    this.value = this.value.replace(/^\s+|\s+$/g, '');

     var a = new Date();
     var b = a.getHours(); var c = a.getMinutes(); var d = a.getSeconds();
     if(b < 10){b = '0'+b;} 
     if(c < 10){c = '0'+c;} 
     if(d < 10){d = '0'+d;}
     var time = b+':'+c+':'+d;

    if (!this.value.length) return
   win.document.getElementById("chat-container").className="chat-Output";
    connection.send('<div class="bubbleGET"> <font color="white"> User(' + time + '): ' +this.value+ '</font></div>');
    console.log(connection.send);
    console.log('User (' + time + '): ' +this.value);
  win.document.getElementById("chat-container").className="chat-OutputGET";
    appendDIV('<div class="bubble"> <font color="white"> User (' + time + '): ' +this.value+ '</font></div>');
    this.value = '';
    };
    var chatContainer = win.document.querySelector('.chat-output');
    function appendDIV(event) {
    var div = document.createElement('div');
    div.innerHTML = event.data || event;
    chatContainer.appendChild(div);
    div.tabIndex = 0;
    div.focus();
    win.document.getElementById('input-text-chat').focus();
        }
    connection.onmessage = appendDIV;

    }
}

win.document.getElementById（ “聊天容器”）的className = “聊天OutputGET”。不起作用

这是班级的CSS：

.chat-Output{
  position: absolute; bottom: 2.1em;
  margin-left: 0.4em;
  padding-left: 0.4em;
  overflow: scroll;
  word-break: break-word;
}

.chat-OutputGET{
  position: absolute; bottom: 2.1em;
  margin-right: 0.4em;
  overflow: scroll;
  word-break: break-word;
}

谢谢:) 我不得不说我是网络开发的新手。

Answer 1

无需绝对定位。您可以使用float和clear。在此处查看我的示例https://jsfiddle.net/yev1cwa0/

Answer 2

只需使用float:left

样式中的

和clear:both

聊天发送消息左接收权限

2 个答案: