代码之家  ›  专栏  ›  技术社区  ›  Rajesh Kumar Dash

如何在聊天室的左侧显示时间戳?

css html
  •  0
  • Rajesh Kumar Dash  · 技术社区  · 7 年前 

    .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示例。让我知道我缺少什么。

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  0
  •   Mukyuu    7 年前

    可能是这样的: 

    .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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    1 年前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    1 年前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    1 年前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    1 年前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    1 年前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    1 年前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    1 年前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    1 年前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    1 年前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号