如何在聊天气泡的左侧显示时间戳？

Question

.chatbox {
 display: inline-block;
  float:right;
  padding: 10px;
  margin-left: 2px;
  margin-right: 3px;
  margin-top:3px;	
  background: #0084ff;
  color: #fff;
  position: relative;
  border-radius: 30px;
  clear: both;
  border-top-right-radius: 5px;
}

.chatbox_other{
display: inline-block;
  padding: 10px;
  margin-left: 2px;
  margin-right: 0px;
  margin-top:3px;
  background: #D3D3D3;
  color: #000 !important;
  position: relative;
  border-radius: 30px;
  border-top-left-radius: 5px;

}

/* speech bubble 13 */

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #0084ff;
  border-right: 15px solid transparent;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}


/* speech bubble 14 */

.sb14:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #0084ff;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}
body { margin: 0 0 0 0; padding:0 0 0 0; overflow:hidden; background-color:#fafafa; }
.myself { font-size:11px;color:#222222;font-style:normal;font-weight:bold;font-style:normal;float:right;white-space:nowrap; padding-top:2px; }
.otherCont { font-size:8px;text-align:right; color:#1970b0;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.myselfCont { font-size:8px;text-align:right; color:#222222;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.system { font-size:11px; word-wrap:break-word;color:#d13f08;font-style:normal;font-weight:normal; white-space:-moz-pre-wrap; _white-space:pre;white-space:pre-wrap; }
.showTimestamp { padding-left:0px;font-size:11px; float:left; color:#999999;font-style:normal;font-weight:normal; }

<div class="myself" title="Susan Adams97 [1:42:29 PM]" dir="ltr">
<nobr>Susan Adams97</nobr>
</div>
</div><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span>
<span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">hi</span></span>
</div>
<div style="clear:both"></div>
</div>

我想在聊天气泡的左侧显示聊天的时间戳和日期（气泡结束后。到目前为止，我只能在角落的尽头获得它，并留出一些空间对此。

.chatbox {
  display: inline-block;
  float: right;
  padding: 10px;
  margin-left: 2px;
  margin-right: 3px;
  margin-top: 3px;
  background: #0084ff;
  color: #fff;
  position: relative;
  border-radius: 30px;
  clear: both;
  border-top-right-radius: 5px;
}

.chatbox_other {
  display: inline-block;
  padding: 10px;
  margin-left: 2px;
  margin-right: 0px;
  margin-top: 3px;
  background: #D3D3D3;
  color: #000 !important;
  position: relative;
  border-radius: 30px;
  border-top-left-radius: 5px;
}


/* speech bubble 13 */

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #0084ff;
  border-right: 15px solid transparent;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}


/* speech bubble 14 */

.sb14:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #0084ff;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}

body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow: hidden;
  background-color: #fafafa;
}

.transcript {
  background-color: #d2d2d2;
}

.message {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  word-wrap: break-word;
  white-space: -moz-pre-wrap;
  _white-space: pre;
  white-space: pre-wrap;
}

.messageCont {
  padding-left: 0px;
  margin-left: 95px;
  word-wrap: break-word;
  white-space: -moz-pre-wrap;
  _white-space: pre;
  white-space: pre-wrap;
}

.other {
  font-size: 11px;
  color: #1970b0;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  white-space: nowrap;
  padding-top: 2px;
}

.myself {
  font-size: 11px;
  color: #222222;
  font-style: normal;
  font-weight: bold;
  font-style: normal;
  float: right;
  white-space: nowrap;
  padding-top: 2px;
}

.otherCont {
  font-size: 8px;
  text-align: right;
  color: #1970b0;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.myselfCont {
  font-size: 8px;
  text-align: right;
  color: #222222;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.system {
  font-size: 11px;
  word-wrap: break-word;
  color: #d13f08;
  font-style: normal;
  font-weight: normal;
  white-space: -moz-pre-wrap;
  _white-space: pre;
  white-space: pre-wrap;
}

.showTimestamp {
  padding-left: 0px;
  font-size: 11px;
  float: left;
  color: #999999;
  font-style: normal;
  font-weight: normal;
}

.showTimestampother {
  padding-top: 9px;
  padding-left: 20px;
  font-size: 11px;
  float: right;
  color: #999999;
  font-style: normal;
  font-weight: normal;
}

.other1 {
  font-size: 11px;
  color: #ba006e;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont1 {
  font-size: 8px;
  text-align: right;
  color: #ba006e;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other2 {
  font-size: 11px;
  color: #007670;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont2 {
  font-size: 8px;
  text-align: right;
  color: #007670;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other3 {
  font-size: 11px;
  color: #3b0256;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont3 {
  font-size: 8px;
  text-align: right;
  color: #3b0256;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other4 {
  font-size: 11px;
  color: #00512b;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont4 {
  font-size: 8px;
  text-align: right;
  color: #00512b;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other5 {
  font-size: 11px;
  color: #a91024;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont5 {
  font-size: 8px;
  text-align: right;
  color: #a91024;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other6 {
  font-size: 11px;
  color: #b8471b;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont6 {
  font-size: 8px;
  text-align: right;
  color: #b8471b;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.other7 {
  font-size: 11px;
  color: #7f1c7d;
  vertical-align: top;
  font-weight: bold;
  font-style: normal;
  float: left;
  width: 95px;
  padding-top: 2px;
}

.otherCont7 {
  font-size: 8px;
  text-align: right;
  color: #7f1c7d;
  font-family: Arial, Lucida Grande;
  font-style: normal;
  vertical-align: top;
  font-weight: bold;
  float: left;
  width: 95px;
}

.highlight {
  background-color: #bed6f8;
}

.datestamp {
  padding-right: 0px;
  font-size: 11px;
  cursor: default;
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: #a7a7a7;
  width: 100%;
  float: left;
  text-align: right;
  color: #333333;
  font-weight: bold;
  font-style: italic;
}

.displayNone {
  display: none;
}

<div class="myself" title="Susan Adams97 [1:42:29 PM]" dir="ltr">
  <nobr>Susan Adams97</nobr>
</div>
<div style="clear:both;"></div>
</div><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span>
<div class="message left" title="Susan Adams97 [1:42:29 PM]" dir="ltr"><span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">hi</span></span>
</div>
<div style="clear:both"></div>
</div>

通过向左浮动。下面是我的html和javascript示例。让我知道我所缺少的内容。

我期待以下类似的内容

Answer 1

可能是这样的：

.showTimestamp { padding-top:20px;font-size:11px; float:right; color:#999999;font-style:normal;font-weight:normal; }

标签的重新排列：

<div class="myself" title="Susan Adams97 [1:42:29 PM]"  dir="ltr"><nobr>Susan Adams97</nobr></div><div style="clear:both;"></div></div><div class="message left" title="Susan Adams97 [1:42:29 PM]"  dir="ltr" ><span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">What's up</span></span><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span> </div><div style="clear:both"></div></div>

摘要：

.chatbox {
 display: inline-block;
  float:right;
  padding: 10px;
  margin-left: 2px;
  margin-right: 3px;
  margin-top:3px;	
  background: #0084ff;
  color: #fff;
  position: relative;
  border-radius: 30px;
  clear: both;
  border-top-right-radius: 5px;
}

.chatbox_other{
display: inline-block;
  padding: 10px;
  margin-left: 2px;
  margin-right: 0px;
  margin-top:3px;
  background: #D3D3D3;
  color: #000 !important;
  position: relative;
  border-radius: 30px;
  border-top-left-radius: 5px;

}

/* speech bubble 13 */

.sb13:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid #0084ff;
  border-right: 15px solid transparent;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  right: -16px;
  top: 0px;
}


/* speech bubble 14 */

.sb14:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid #0084ff;
  border-top: 15px solid #0084ff;
  border-bottom: 15px solid transparent;
  left: -16px;
  top: 0px;
}
body { margin: 0 0 0 0; padding:0 0 0 0; overflow:hidden; background-color:#fafafa; }
.transcript { background-color:#d2d2d2;}
.message { padding-left:0px; padding-right:0px;margin-left:0px; word-wrap:break-word; white-space:-moz-pre-wrap; _white-space:pre; white-space:pre-wrap; }
.messageCont { padding-left:0px; margin-left:95px; word-wrap:break-word; white-space:-moz-pre-wrap; _white-space:pre;white-space:pre-wrap;}
.other { font-size:11px;color:#1970b0;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; white-space:nowrap; padding-top:2px; }
.myself { font-size:11px;color:#222222;font-style:normal;font-weight:bold;font-style:normal;float:right;white-space:nowrap; padding-top:2px; }
.otherCont { font-size:8px;text-align:right; color:#1970b0;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.myselfCont { font-size:8px;text-align:right; color:#222222;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.system { font-size:11px; word-wrap:break-word;color:#d13f08;font-style:normal;font-weight:normal; white-space:-moz-pre-wrap; _white-space:pre;white-space:pre-wrap; }
.showTimestampother { padding-top:9px;padding-left:20px;font-size:11px; float:right; color:#999999;font-style:normal;font-weight:normal; }
.other1 { font-size:11px; color:#ba006e;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px; }
.otherCont1 { font-size:8px;text-align:right; color:#ba006e;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other2 { font-size:11px; color:#007670;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px; }
.otherCont2 { font-size:8px;text-align:right; color:#007670;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other3 { font-size:11px; color:#3b0256;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px; }
.otherCont3 { font-size:8px;text-align:right; color:#3b0256;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other4 { font-size:11px; color:#00512b;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px; }
.otherCont4 { font-size:8px;text-align:right; color:#00512b;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other5 { font-size:11px; color:#a91024;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px;}
.otherCont5 { font-size:8px;text-align:right; color:#a91024;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other6 { font-size:11px; color:#b8471b;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px;}
.otherCont6 { font-size:8px;text-align:right; color:#b8471b;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.other7 { font-size:11px; color:#7f1c7d;vertical-align:top;font-weight:bold;font-style:normal;float:left; width:95px; padding-top:2px;}
.otherCont7 { font-size:8px;text-align:right; color:#7f1c7d;font-family:Arial,Lucida Grande;font-style:normal;vertical-align:top;font-weight:bold;float:left; width:95px; }
.highlight { background-color:#bed6f8; }
.datestamp { padding-right:0px; font-size:11px; cursor:default;padding-top:1px;padding-bottom:1px; background-color:#a7a7a7; width:100%; float:left; text-align:right; color:#333333; font-weight:bold; font-style:italic; }
.displayNone {display:none;}

.showTimestamp { padding-top:20px;font-size:11px; float:right; color:#999999;font-style:normal;font-weight:normal; }

<div class="myself" title="Susan Adams97 [1:42:29 PM]"  dir="ltr"><nobr>Susan Adams97</nobr></div><div style="clear:both;"></div></div><div class="message left" title="Susan Adams97 [1:42:29 PM]"  dir="ltr" ><span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">What's up</span></span><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span> </div><div style="clear:both"></div></div>
<div class="myself" title="Susan Adams97 [1:42:29 PM]"  dir="ltr"><nobr>Susan Adams97</nobr></div><div style="clear:both;"></div></div><div class="message left" title="Susan Adams97 [1:42:29 PM]"  dir="ltr" ><span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">Nevermind me just testing</span></span><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span> </div><div style="clear:both"></div></div>
<div class="myself" title="Susan Adams97 [1:42:29 PM]"  dir="ltr"><nobr>Susan Adams97</nobr></div><div style="clear:both;"></div></div><div class="message left" title="Susan Adams97 [1:42:29 PM]"  dir="ltr" ><span class="chatbox"><span style="font-size:10pt;font-family:Arial;" class="left">Lorem Ipsum is simply dummy text of the printing and typm fsdfs
sdfs
</span></span><span class="showTimestamp tsDisplay"><nobr>1:42:29 PM</nobr></span> </div><div style="clear:both"></div></div>