如何创建可堆叠、左右对齐的文本框以模拟手机对话？

嘿，我来帮你搞定这个手机短信对话的效果！要实现左右对齐、依次弹出的消息样式，用HTML+CSS就能轻松搞定，甚至还能加个自然的动画让消息逐个出现。下面是完整的实现方案：

• 用容器包裹每条消息，通过简单的margin技巧区分双方消息的左右对齐（自己发的右对齐，对方的左对齐）
• 给消息气泡设置不同的背景色、圆角，还原真实短信的视觉区分
• 用CSS动画实现消息从下方滑入的弹出效果，通过设置不同的动画延迟，让消息依次出现

HTML结构 #

<div class="chat-container">
  <!-- 对方发送的消息 -->
  <div class="message message-received">
    <p>嘿，今晚要不要一起吃火锅？</p>
  </div>
  <!-- 自己发送的消息 -->
  <div class="message message-sent">
    <p>好呀！几点在哪？</p>
  </div>
  <!-- 对方发送的消息 -->
  <div class="message message-received">
    <p>六点半，巷口那家老火锅～</p>
  </div>
  <!-- 自己发送的消息 -->
  <div class="message message-sent">
    <p>没问题，我准时到！</p>
  </div>
</div>

CSS样式 #

/* 整体聊天容器，模拟手机宽度 */
.chat-container {
  max-width: 420px;
  margin: 30px auto;
  padding: 15px;
  font-family: 'Segoe UI', Roboto, sans-serif;
  background-color: #f0f2f5;
  border-radius: 10px;
}

/* 基础消息样式 */
.message {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 22px;
  max-width: 75%;
  line-height: 1.4;
  /* 初始隐藏，等待动画触发 */
  opacity: 0;
  animation: slideIn 0.4s ease-out forwards;
}

/* 对方消息：左对齐、浅灰背景 */
.message-received {
  background-color: #ffffff;
  border-bottom-left-radius: 6px;
}

/* 自己消息：右对齐、品牌蓝背景、白色文字 */
.message-sent {
  background-color: #007aff;
  color: #ffffff;
  margin-left: auto;
  border-bottom-right-radius: 6px;
}

/* 消息滑入动画 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 给每条消息设置不同延迟，实现依次弹出 */
.message:nth-child(1) { animation-delay: 0.3s; }
.message:nth-child(2) { animation-delay: 0.8s; }
.message:nth-child(3) { animation-delay: 1.3s; }
.message:nth-child(4) { animation-delay: 1.8s; }

• 用margin-left: auto实现自己消息的右对齐，不需要复杂的布局，简单高效
• 调整消息的border-radius，让气泡更贴近真实短信的圆角样式（底部朝向自己的角要更尖锐一点）
• 动画选择translateY让消息从下方滑入，比单纯的淡入更有真实对话的弹出感，延迟时间可以根据需求自由调整
• 限制消息的max-width，避免过长文本撑满容器，还原手机短信的阅读体验

内容的提问来源于stack exchange，提问作者Elizabeth Bird Rock