不说啥了，贴代码
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/reset.css">
<title></title>
<style>
.fl,.fr{
margin-bottom: 5px;
}
.fl img{
float: left;
}
.fl p{
float: left;
font-size: 13px;
background: #e9e9e9;
padding: 5px;
margin: 0;
max-width: 130px;
/*word-break: break-all;*/
word-wrap: break-word;
}
.fr img{
float: right;
}
.fr p{
float: right;
font-size: 13px;
background: #00e9e9;
padding: 5px;
margin: 0;
max-width: 130px;
word-break: break-all;
}
</style>
</head>
<body>
<div class="box">
<div class="box_cont">
<ul id="cont">
<!-- <li class="fl clearfix">
<img src="img/1.png" alt="">
<p>干哈哈大或或或或或或或</p>
</li>
<li class="fr clearfix">
<img src="img/2.png" alt="">
<p>干哈哈大或或或或或或或</p>
</li> -->
</ul>
<form class="more">
<s id="people">
<img src="img/1.png" id="pic">
</s>
<input type="text" id="text" />
<input type="button" id="btn" value="发送"/>
</form>
</div>
</div>
<script>
var oBtn=document.getElementById('btn');
var oImg=document.getElementById('pic');
var oUl=document.getElementById('cont');
var oText=document.getElementById('text');
var flag=true;
// 选图片
oImg.onclick=function (){
if (flag) {
oImg.src="img/2.png";
flag=false;
}
else{
oImg.src="img/1.png";
flag=true;
}
}
oBtn.onclick=function (){
// 把图片+输入框的内容加到ul里去
if (flag) {
oUl.innerHTML=oUl.innerHTML+'<li class="fl clearfix"><img src="img/1.png" alt=""><p>'+oText.value+'</p></li>';
oText.value='';
}
else{
oUl.innerHTML=oUl.innerHTML+'<li class="fr clearfix"><img src="img/2.png" alt=""><p>'+oText.value+'</p></li>';
oText.value='';
}
}
</script>
</body>
</html>