做一个模拟两人聊天界面遇到困难
问题描述
现在有三个问题：
第一：我无法让头像图片跟随说的话一起发送出去，我试过直接放入img.src但是并不行。
第二：我没有办法做到让两个模拟的对话一人一句分的清清楚楚，因为我这个发送出去的 是改变这个div的innerHTML 但是我发第二句的话同样也是改变div的innerHTML 他们两个本来就应该是一个 所以我搞不清要怎么变成两个 。
第三：怎么让我发送的字是从上到下显示，我试过改变他们的外边距，但是并没有什么效果。
问题出现的环境背景及自己尝试过哪些方法
我询问了多个前端群，自己也在浏览器查了多次，但都没能解决。
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>模拟手机聊天</title>
<style>
phpone{
width:330px;height:550px;border:5px solid #FFD700;margin:80px auto 0;position:relative;
}
case{
width:330px;height:50px;border-top:2px solid #ccc;position:absolute;bottom:0;background:#EBEBEB;
}
img1{
widht:50px;height:50px;position:absolute;left:0;bottom:0;
}
img2{
widht:50px;height:50px;position:absolute;left:0;bottom:0;display:none;
}
text{
position:absolute;right:110px;bottom:10px;
}
but{
width:80px;height:30px;position:absolute;right:10px;;bottom:7px;background:#708090;
}
box{
padding:5px 0;background:#7CFC00;font-size:20px;font-family:"宋体";position:absolute;right:0;
}
box2{
widht:auto;background:#ccc;font-size:20px;font-family:"宋体";margin:50px 50px 50px 0;position:absolute;left:0;padding:5px 0;
}
</style>
</head>
<body>
<div id="phpone">
<div id="box"></div><br/>
<div id="box2"></div><div id="case"><img id="img1" src="img/wou.svg"/><img id="img2" src="img/man.svg"/><input id="text" type="text"/><input id="but" type="button" value="发送"/>
</div>
</div>
</body>
/下面是js代码/
<script>
window.onload=function(){var oImg1=document.getElementById('img1');var oImg2=document.getElementById('img2');var oText=document.getElementById('text');var oBut=document.getElementById('but');var oPhpone=document.getElementById('phpone');var oBox=document.getElementById('box');var oBox2=document.getElementById('box2');
low();
oImg1.onclick=show;function show(){
oImg2.style.display='block';
oBut.onclick=function(){
oBox2.innerHTML +='说:'+oText.value+'<br/>';
oText.value='';};
};
oImg2.onclick=low;function low(){
oImg2.style.display='none';
oBut.onclick=function(){
oBox.innerHTML +='说:'+oText.value+'<br/>';
oText.value='';};
};
};
</script>
</html>
希望完成的效果是这样：
实际上现在是这样：
希望各位伙伴可以帮助我，或给我提供一个思路。我现在完全想不明白要怎么继续写。谢谢！
