如何在邮件聊天框中显示姓名，当前时间

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>