时间戳

首页 > 解决方案 > Chatbox - 将聊天文本气泡与日期时间对齐

html - Chatbox - 将聊天文本气泡与日期时间对齐

问题描述

我正在制作一个聊天框，但无法将日期和时间与聊天气泡对齐。

我希望宽度对于气泡内的文本是动态的。

这是我的代码笔： https ://codepen.io/aceraven777/pen/WNjrrZg

这是我的代码：

HTML

<div class="chatbox white-box">
    <div class="list">
        <div id="message-74" class="message">
            <div class="image"><img src="https://via.placeholder.com/250x250"></div>
            <div class="right">
                <div class="name-time">
                    <h5>ssss b</h5>
                    <p class="time">Jul 5, 05:35am</p>
                </div>
                <div class="text">
                    <p>wwXPH683SqxLBApBH0Xq</p>
                </div>
            </div>
        </div>
        <div id="message-77" class="message self">
            <div class="image"><img src="https://via.placeholder.com/250x250"></div>
            <div class="right">
                <div class="name-time">
                    <h5>fasdf wrewqrwe</h5>
                    <p class="time">Jul 5, 05:38am</p>
                </div>
                <div class="text">
                    <p>F90mCK6pULX7Dl9iOdV2</p>
                </div>
            </div>
        </div>
        ...
    </div>
</div>

CSS

.chatbox {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .chatbox .list {
    flex: auto;
    display: flex;
    flex-direction: column;
  }
  
  .chatbox .list .message:first-child {
    margin-top: auto !important;
  }
  
  .chatbox .list .message {
    display: inline-grid;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px 6px;
  }
  
  .chatbox .list .message h5,
  .chatbox .list .message p {
    margin: 0;
  }
  
  .chatbox .list .message .image {
    margin-top: -8px;
  }
  
  .chatbox .list .message .image img {
    width: 100%;
    border-radius: 50px;
  }
  
  .chatbox .list .message .right {
    margin-left: 7px;
    max-width: 60%;
  }
  
  .chatbox .list .message .right .text {
    font-size: 0.8em;
    display: inline-block;
    border-radius: 10px;
    background-color: #989898;
    padding: 10px;
    min-height: 50px;
  }
  
  .chatbox .list .message .right .text p {
    display: inline-block;
    color: #000;
  }
  
  .chatbox .list .message .name-time {
    display: flex;
    justify-content: space-between;
  }
  
  .chatbox .list .message .name-time p {
    font-size: 0.8em;
    color: #4c4c4c;
  }
  
  .chatbox .list .message .name-time .time {
    white-space: nowrap;
  }
  
  .chatbox .list .message #chat-user-form {
    background-color: #c5c5c5;
  }
  
  .chatbox .list .message #chat-user-form input {
    background-color: transparent;
    border: 0;
  }
  
  .chatbox .list .message #chat-user-form button {
    background: transparent;
    border: 0;
  }
  
  .chatbox .list .message #chat-user-form .input-group {
    background-color: #989898;
  }
  
  .chatbox .list .message.self {
    grid-template-columns: auto;
  }
  
  .chatbox .list .message.self .image,
  .chatbox .list .message.self .name-time h5 {
    display: none;
  }
  
  .chatbox .list .message.self .right {
    margin-left: auto;
  }

标签： htmlcss

解决方案

添加max-width: 200px; margin: auto;到.chatbox .list .message .right .text {}将使整个聊天框动态化。它将根据文本进行自我调整。

代码：

.chatbox .list .message .right .text {
 font-size: 0.8em;
 display: inline-block;
 border-radius: 10px;
 background-color: #989898;
 padding: 10px;
 max-width: 200px;
 margin: auto;
}

推荐阅读