html - 如何在消息聊天框中显示姓名、当前时间

Question

我们开发的聊天应用程序看起来像 watts-app。我们完成了一切，但我想在聊天消息框中显示姓名和当前时间。怎么做

requirement screen shot

.left {
  position: relative;
  background: white;
  text-align: right;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  right: 20px;
}

.left::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.left::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;

}

div{
  clear: right;
}

<div class="left">
  <p style="margin-top: 0px;margin-bottom: 0px;color:green;font-size: 11px;">Kranti</p>
  <span>thanks</span>
   <p style="float: left;margin-bottom: 0px;color:red;font-size: 11px;">2:33 PM</p>
</div>

Answer 1

您可以使用自己的类创建多个 span 元素，并将用户名和时间样式设置为它们的位置。

使用绝对定位将样式设置为您提供的图像。

给你:https://jsfiddle.net/keqh0cqw/1/

您的新 html 示例:

<div class="right">
    <span class="username">kranthi</span>
    <span class="message">thanks</span>
    <span class="time">12:08</span>
</div>