嘿，我来帮你搞定这个聊天消息左右对齐的问题！要实现自己发送的黑色布局消息在右侧、他人消息在左侧，核心是通过CSS给两种消息容器设置不同的对齐规则，下面给你具体的实现思路和可直接复用的代码：

核心思路 #

给自己的消息和他人的消息添加差异化的CSS类，利用Flex布局的align-self属性控制它们在容器中的对齐方向，同时配合样式美化区分两种消息样式。

完整代码示例 #

HTML结构

<!-- 聊天容器 -->
<div class="chat-box">
  <!-- 他人发送的消息 -->
  <div class="chat-message other">
    <p>哈喽，这是我发的消息～</p>
  </div>
  <!-- 自己发送的黑色布局消息 -->
  <div class="chat-message self">
    <p>你好！我的消息要显示在右边哦</p>
  </div>
  <div class="chat-message other">
    <p>完美！现在我们的消息位置终于对啦😎</p>
  </div>
</div>

CSS样式

/* 聊天容器：设置垂直方向的Flex布局 */
.chat-box {
  width: 100%;
  max-width: 650px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* 消息之间的间距 */
  background-color: #f5f5f5;
  border-radius: 10px;
}

/* 通用消息基础样式 */
.chat-message {
  max-width: 75%; /* 限制消息宽度，避免过长影响阅读 */
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* 他人消息：左对齐，浅色背景 */
.chat-message.other {
  align-self: flex-start;
  background-color: #fff;
  color: #333;
  border-top-left-radius: 4px; /* 调整圆角，贴近主流聊天APP风格 */
}

/* 自己的消息：右对齐，黑色背景 */
.chat-message.self {
  align-self: flex-end;
  background-color: #1d1d1d;
  color: #fff;
  border-bottom-right-radius: 4px;
}

关键细节说明 #

• 用Flex布局的align-self属性是最简洁的实现方式：flex-start让他人消息靠左，flex-end让自己的消息靠右。
• 设置max-width是为了避免超长消息撑满容器，提升阅读体验。
• 调整圆角的细节是为了让消息样式更贴近微信、QQ等主流聊天APP的视觉习惯。

如果你的现有代码是用float布局，也可以替换成：给自己的消息加float: right; clear: both;，他人消息加float: left; clear: both;，不过Flex布局的可维护性会更高哦～

内容的提问来源于stack exchange，提问作者Ketan Choyal