Question

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

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

这是我的代码笔：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;
  }

Answer 1

将 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;
}

Answer 2

您在 max-width 元素上有 60% 的 .right，然后在作为弹性项目的 .name-time 上有 justify-content: space-between，这是将 .time 元素向右推以填充两个 flex 子级之间的空间。

编辑：将.right元素的宽度更改为width: max-content;然后您可以将 justify-content: space-between 留在 .name-time 元素上。


/* changed */
.chatbox .list .message .right {
    margin-left: 7px;
    width: max-content;

.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;
}

/* changed */
.chatbox .list .message .right {
    margin-left: 7px;
    width: max-content;
}

.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;
}

/* changed */
.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;
}

<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-76" class="message">
            <div class="image"><img src="https://via.placeholder.com/250x250"></div>
            <div class="right">
                <div class="name-time">
                    <h5>dvxcfd b</h5>
                    <p class="time">Jul 5, 05:38am</p>
                </div>
                <div class="text">
                    <p>kjc3O9vgcDhGqCLTmOkG</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 id="message-83" 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:47am</p>
                </div>
                <div class="text">
                    <p>rpWEnqlu2g1RGYzOMF2m</p>
                </div>
            </div>
        </div>
        <div id="message-88" class="message">
            <div class="image"><img src="https://via.placeholder.com/250x250"></div>
            <div class="right">
                <div class="name-time">
                    <h5>fsdafsfs dww</h5>
                    <p class="time">Jul 5, 06:06am</p>
                </div>
                <div class="text">
                    <p>NYxiFdkPSy4J6NoyEFiw</p>
                </div>
            </div>
        </div>
        <div id="message-91" 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, 06:49am</p>
                </div>
                <div class="text">
                    <p>xuyQYPIiNfRdLLYsbjV9</p>
                </div>
            </div>
        </div>
        <div id="message-95" 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, 06:49am</p>
                </div>
                <div class="text">
                    <p>G4zhIi94wKlyPZfutXcW</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

2 个答案: