谁帮我看看这个页面要怎么改

小木偶MO 2017-07-19 06:47:17
现在的问题是，原来点提交聊天气泡都是靠左的，然后我把点完提交出来的气泡改到右边了，但是他不能从右边依次向下走，会向左，也说不明白了，，看一下图吧
这是原来的界面

这是我改过之后的，就变成了这个样子

哪位大佬来帮帮忙啊


<body>

  <div class="chat_message fn-clear">

    <div class="chat_left">

      <div class="message_box" id="message_box">

       <div class="msg_item fn-clear">

        <div class="uface"><img src="images/hetu.jpg" width="40" height="40"  alt=""/></div>

		<div class="item_right">

		<div class="msg own">' + msg + '</div>

		 <div class="name_time">' + from_name + ' · 30秒前</div>

			</div>

		</div>

      <div class="msg_itemr fn-clearr">

        <div class="ufacer"><img src="images/hetu.jpg" width="40" height="40"  alt=""/></div>

		<div class="item_rightr">

		<div class="msgr ownr">' + msg + '</div>

		 <div class="name_timer">' + from_name + ' · 30秒前</div>

			</div>

		</div>

      </div>

      <div class="write_box">

        <textarea id="message" name="message" class="write_area" placeholder="说点啥吧..."></textarea>

        <input type="hidden" name="fromname" id="fromname" value="河图" />

        <input type="hidden" name="to_uid" id="to_uid" value="0">

        <div class="facebox fn-clear">

          <div class="expression"></div>

          <div class="chat_type" id="chat_type">群聊</div>

          <button name="" class="sub_but">提 交</button>

        </div>

      </div>

    </div>

 

<script type="text/javascript">



function sendMessage(event, from_name, to_uid, to_uname){

    var msg = $("#message").val();

	if(to_uname != ''){

	    msg = '您对 ' + to_uname + ' 说： ' + msg;

	}

	var htmlData =   '<div class="msg_itemr fn-clearr">'

       +' <div class="ufacer"><img src="images/hetu.jpg" width="40" height="40"  alt=""/></div>'

		+'<div class="item_rightr">'

		+'<div class="msgr ownr">' + msg + '</div>'

		+' <div class="name_timer">' + from_name + ' · 30秒前</div>'

		+'	</div>'

		+'</div>';

			       $.ajax({

						type:"GET", 

			            url:"msg?msg="+msg, 

			            dataType:"json",      

			            contentType:"application/json;charset=utf-8",  

			            success:function(data){ 

			            	var html =   '<div class="msg_item fn-clear">'

			                    + '   <div class="uface"><img src="${pageContext.request.contextPath}/images/hetu.jpg" width="40" height="40"  alt=""/></div>'

			 			       + '   <div class="item_right">'

			 			       + '     <div class="msg kachi">' + data.ask.text + '</div>'

			 			       + '     <div class="name_time">' + from_name + ' · 30秒前</div>'

			 			       + '   </div>'

			 			       + '</div>';

			            	$("#message_box").append(html);

			            	$('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);

						}

					});

	$("#message_box").append(htmlData);

	$('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);

	$("#message").val('');

}







@charset "utf-8";



/* 清理浮动 */

.fn-clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.fn-clear {zoom:1; /* for IE6 IE7 */}

.fn-clearr:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.fn-clearr {zoom:1; /* for IE6 IE7 */}

/* 隐藏, 通常用来与 JS 配合 */

body .fn-hide {display:none;}

/* 设置内联, 减少浮动带来的bug */

.fn-left,.fn-right {display:inline;}

.fn-left {float:left;}

.fn-right {float:right;}

/*webkit内核浏览器滚动条*/

::-webkit-scrollbar-track-piece{background:#e9e9e9;}

::-webkit-scrollbar{width:8px;height:8px;}

::-webkit-scrollbar-button{display:none;}

::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece{background:-webkit-gradient(linear,left);}

::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:horizontal{border-radius:6px;background:#bdbdbd;}

::-webkit-scrollbar-thumb:hover{background:#8e8e8e;}

::-webkit-scrollbar-thumb:active{background:#828181;}

@font-face {

  font-family: 'fontello';

  src: url('../font/fontello.eot?68245288');

  src: url('../font/fontello.eot?68245288#iefix') format('embedded-opentype'),

       url('../font/fontello.woff?68245288') format('woff'),

       url('../font/fontello.ttf?68245288') format('truetype'),

       url('../font/fontello.svg?68245288#fontello') format('svg');

  font-weight: normal;

  font-style: normal;

}



/*common*/

body{ background:#176994 url(../images/wood.jpg); height:-moz-calc(100% - 100px); height:-webkit-calc(100% - 100px); height:calc(100% - 100px); padding:50px;}

.fontico:before{

  font-family: "fontello";

  font-style: normal;

  font-weight: normal;

  speak: none;

 

  display: inline-block;

  text-decoration: inherit;

  text-align: center;

}

i.down:before{ content:'\e800';}

i.lock:before{ content:'\e806';}

i.logout:before{ content:'\e804';}



/*chatbox*/

.chatbox{ overflow:hidden; height:100%; width:100%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:rgba(255,255,255,1);}



/*chat_top*/

.chat_top{ height:60px; border-bottom:1px solid #eee;}

.logo{ float:left;}

.logo img{ vertical-align:bottom;}

.uinfo{ margin:10px 0; float:right; padding-right:20px;}

.uface{ float:left; height: 40px;}

.uface img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}

.uinfo .uname{ float:left; line-height:40px; margin-left:10px; color:#2E4059; position:relative;}

.uinfo .uname i.down{ margin-left:50px;}

.managerbox{ display:none; width:100px; border:1px solid #eee; background-color:#FFF; padding:10px 0; position:absolute; top:40px; right:-10px;}

.managerbox a{ display:block; color:#2E4059; padding:0px 10px;}

.managerbox a i{ margin-right:10px;}

.managerbox a:hover{ background-color:#f9f9f9; text-decoration:none;}



/*chat_message*/

.chat_message{ height:-moz-calc(100% - 61px); height:-webkit-calc(100% - 61px); height:calc(100% - 61px);}



/*chat_left*/

.chat_left{ padding:20px; width:-moz-calc(100% - 240px); width:-webkit-calc(100% - 240px); width:calc(100% - 240px); height:-moz-calc(100% - 40px); height:-webkit-calc(100% - 40px); height:calc(100% - 40px); float:left;}

.message_box{ background-color:#FFF; margin-bottom:20px; height:-moz-calc(100% - 120px); height:-webkit-calc(100% - 120px); height:calc(100% - 120px); overflow:auto;}

.msg_item{ margin-bottom:20px; position:relative;}

.msg_item .uface{ position:absolute; bottom:0px;}

.msg_item .item_right{ margin-left:45px; float:left; margin-right:15px;}

.msg_item .msg{ background-color:#F4F6F8; padding:10px 15px; line-height:24px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#2E4059; position: relative; margin-bottom:5px;}

.msg.own{ background-color:#E0F1FC;}/*自己的聊天记录显示为蓝色*/

.msg.kachi{ background-color:#80ff80;}/*自己的聊天记录显示为蓝色*/

.msg_item .msg:before {

content: "";

position: absolute;

bottom: -12px;

left: 10px;

border-width: 12px 12px 0 0 ;

border-style: solid;

border-color: #F4F6F8 transparent;

display: block;

width: 0;

}

.msg_item .msg.own:before{ border-color:#E0F1FC transparent;}

.msg_item .name_time{ font-size:12px; color:#7E90A5; line-height:30px; padding-left:10px;}





.ufacer{ float:right; height: 40px;}

.ufacer img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}

.msg_itemr{ margin-bottom:20px; position:relative;float:right;margin-right:35px;}

.msg_itemr .ufacer{ position:absolute; bottom:0px;float:right;margin-left:170px}

.msg_itemr .item_rightr{ margin-left:0; float:right; margin-right:15px;}

.msg_itemr .msgr{ background-color:#F4F6F8; padding:10px 25px; line-height:24px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#2E4059; position: relative; margin-bottom:5px;}

.msgr.ownr{ background-color:#CAFF70;}/*自己的聊天记录显示为绿色*/

.msg_itemr .msgr:before {

content: "";

position: absolute;

bottom: -12px;

left: 139px;

border-width: 12px 0 0 12px ;

border-style: solid;

border-color: #F4F6F8 transparent;

display: block;

width: 0;

}

.msg_itemr .msgr.ownr:before{ border-color:#CAFF70 transparent;}

.msg_itemr .name_timer{ font-size:12px; color:#7E90A5; line-height:30px; padding-left:10px;}





.write_box{ height:100px; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; overflow:hidden;}

.write_area{ border:2px solid #E3E8ED; border-bottom:none; padding:5px; outline:none; color:#B4C0CE; margin:0; vertical-align:bottom; width:-moz-calc(100% - 14px); width:-webkit-calc(100% - 14px); width:calc(100% - 14px); height:56px;}

.facebox{ height:32px; width:100%; background-color:#E3E8ED;}

.sub_but{ float:right; padding:0 25px; background-color:#7E90A5; outline:none; border:none; height:32px; cursor:pointer; line-height:30px; color:#FFF;}



/*chat_right*/

.chat_right{ width:199px; height:100%; float:left; border-left:1px solid #eee;}

.user_list{ padding:0; overflow:auto; height:100%;}

.user_list li{ padding:10px 20px; color:#2E4059; cursor:pointer;}

.user_list li:hover,.user_list li.selected{ background-color:#F4F6F8;}

.user_list li span{ display:block; float:left; width:30px; height:30px; margin-right:10px;}

.user_list li em{ display:block; float:left; height:30px; line-height:30px;}

.user_list li small{ width:10px; height:10px; margin:10px; float:left; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}

small.online{ background-color:#57B869;}

small.offline{ background-color:#EB3E3E;}

.user_list li img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; vertical-align:middle;}





/*expression - 表情,有待增加*/

.expression{ float:left;}



/*chat_type - 聊天性质,私聊|群聊*/

.chat_type{ float:left; line-height:30px; padding-left:10px;}

完整代码贴不下。。
...全文
170 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
jio可 2017-07-21
  • 打赏
  • 举报
 回复
每一条聊天记录都设置单独一行，宽度设置100%;用了浮动不满宽度肯定会缩到一行。clear:both;独占一行
z153373846 2017-07-21
  • 打赏
  • 举报
 回复
这代码看着脑壳痛。 一条聊天记录一个div或者li。 div内包含一些信息，通过float来实现左右浮动。 行内末尾清除浮动就好了
网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中
这个在做网页中常要用到，有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含（引用）这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不...
vue项目动态修改页面title
动态修改页面title外加点击跳转重新打开一个新页面并修改title
vue+elementUi 系统后台中的修改密码页面（全）
就是感觉自己在做这个页面想找参考的时候，没有找到自己特别想要的 ，记录下来，万一能帮到跟我一样有需要的盆友呢 项目背景： 系统后台中右上角需要添加一个修改密码新页面需求，如图： 二，正式建立修改密码页的...
修改iframe页面中的css
在一个html页面中(a.html)使用iframe引入另外一个页面（b.html），有时候我们需要修改ifram页面的样式，该如何操作呢？假设我们没有修改b.html页面的...看个例子： 1）a.html： <!DOCTYPE html> <html>
页面置换算法的访问位和修改位
某进程有4个页面，页号为0~3，页面变换表及状态位、访问位和修改位的含义如下图所示。系统给该进程分配了3个存储块，当采用第二次机会页面替换算法时，若访问的页面1不在内存，这时应该淘汰的页号为 () 。 A....
HTML5

39,084

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章