<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> New Document </title>
<script type="text/javascript">
</script>
<style>
@charset "UTF-8";
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: normal;
font-weight: normal;
line-height: 1.5;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:before, .clearfix:after {
content: " ";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
}
html {
-moz-user-select: none;
}
body, input {
font-size: 12px;
line-height: 1.5;
}
.serif {
font-family: Georgia,Times,'Times New Roman',serif;
}
.sans, input, textarea, body {
font-family: STHeiti,微软雅黑,"Microsoft Yahei",Helmet,Freesans,sans-serif;
}
body, select, input, textarea {
color: #555555;
}
.left {
float: left;
}
.right {
float: right;
}
.rctCtn {
background: none repeat scroll 0 0 #FCFCFC;
float: left;
position: relative;
width: 500px;
}
.msgCtCtn {
left: 16px;
position: absolute;
top: 20px;
width: 251px;
z-index: 1009;
}
.lft .avtCtn, .lft .chtMsg {
float: left;
}
.rght .chtMsg {
float: right;
}
.chtCtn:hover {
background: none repeat scroll 0 0 #FCFCFC;
}
.chtMsg {
background: none repeat scroll 0 0 #A9ECFF;
border: 1px solid #89D6EC;
border-radius: 3px 3px 3px 3px;
margin-bottom: 7px;
margin-top: 7px;
position: relative;
width:200px;
}
.lft .chtMsg {
margin-left: 20px;
}
.rght .chtMsg {
background: none repeat scroll 0 0 #EEFBFF;
border: 1px solid #CEE8EF;
margin-right: 20px;
}
.chtMsg .chtTail {
background: url("http://jing.fm/images/chtElm.png") no-repeat scroll 0 0 transparent;
height: 13px;
left: -12px;
position: absolute;
top: 15px;
width: 12px;
}
.chtMsg .chat{
-moz-hyphens: auto;
-moz-user-select: text;
color: #4D8595;
font-size: 11px;
line-height: 18px;
margin-bottom: -1px;
max-width: 214px;
padding: 10px 15px 8px;
text-align: justify;
word-wrap: break-word;
}
.rght .chtMsg .chtTail {
background-position: 0 -16px;
left: auto;
right: -12px;
}
.rght .chtMsg .chat {
color: #83A0A8;
}
</style>
</head>
<body>
<div class="jspPane" style="width:500px;height: 700px;">
<div class="rctCtn chtCtn lft ">
<div class="chtMsg">
<div style="font-size:8px;text-align:center;">2012-11-11 12:12:12 </div>
<p class="chat">hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello</p>
<div class="chtTail"></div>
</div>
</div>
<div class="rctCtn chtCtn rght">
<div class="chtMsg">
<p class="chat">牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛</p>
<div class="chtTail"></div>
</div>
</div>
</div>
</body>
</html>