文本较短时如何在聊天气泡布局中对齐元数据（时间和图标）？

Question

“正确版本”应该是什么样子

看起来如何，“不正确的版本”

当文本较长时，元数据看起来不错，但是，当文本较短时，例如，用户发送“确定”，则元数据位置不正确。

我尝试过使用显示柔性，但问题是消息没有环绕元数据，最终看起来右侧填充太多。现在，当用户发送“Ok”之类的短消息时，元数据无法正确显示。我找不到那种平衡。

html {
  font-family: "Roboto", serif;
}

.chat-window {
  width: 500px;
  display: flex;
}

.message {
  margin: 0;
  font-size: 14.2px;
  position: relative;
  padding: 16px;
}

.message p {
  margin: 0;
}

.sent {
  justify-content: end;
  background-color: #ECF9FD;
}

.metadata {
  float: right;
  position: absolute;
  bottom: 0;
  right: 5px;
  white-space: nowrap;
}

.time {
  font-size: 12px;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<div class="chat-window">
  <div class="message sent">
    <p>Pel
    </p>
    <span class="metadata">
            <span class="time">21:08</span>
    <span class="tick">
                <svg width="20px" height="20px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none">
                    <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l5 5 12-12M16 20l2 2 12-12"/>
                  </svg>
            </span>
    </span>
  </div>
</div>

Answer 1

使用

display: flex

作为

.message

并调整

.metadata

的样式，以确保无论消息长度如何，它都保持正确对齐。

我尝试过使用显示柔性，但问题是消息没有环绕元数据，最终看起来右侧填充太多。

可能

display: flex

没有正确使用。所以如果你也能提供的话会很有帮助。

以防万一，我会调整你的CSS代码。

html {
  font-family: "Roboto", serif;
}

.chat-window {
  width: 500px;
  display: flex;
}

.message {
    /* Added */
  display: flex; /* We use flexbox here for the alignment */
  justify-content: space-between; /* This adds space between text and metadata */
  align-items: flex-start; /* Align the items to the top */
    /* End */
  margin: 0;
  font-size: 14.2px;
  position: relative;
  padding: 16px;
}

.message p {
  margin: 0 5px 0 0; /* Adjusted so there will be a gap in time */
}

.sent {
  justify-content: end;
  background-color: #ECF9FD;
}

.metadata {
  /*float: right;
  position: absolute;
  bottom: 0;
  right: 5px;
  white-space: nowrap;*/
  
    /* Change */
  display: flex; /* Instead of absolute, we use flexbox for metadata */
  align-items: center; /* this center item vertically */
  white-space: nowrap; /* use to prevent wrapping */
    /* End */
}

.time {
  font-size: 12px;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">



<div class="chat-window">
  <div class="message sent">
    <p>Ok</p>
    <span class="metadata">
            <span class="time">21:08</span>
    <span class="tick">
                <svg width="20px" height="20px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none">
                    <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l5 5 12-12M16 20l2 2 12-12"/>
                  </svg>
            </span>
    </span>
  </div>
</div>