嘿，我来帮你搞定这个消息错位布局的问题！这种类似聊天软件的气泡错位其实用CSS就能轻松实现，不用大改HTML结构，咱们一步步来：

1. 调整Django模板的HTML结构（小改动就行） #

首先在循环渲染消息的时候，给每个消息容器加上区分发送方和接收方的类——判断当前消息是登录用户发的还是对方发的，对应的类名比如sent（发送方）和received（接收方）：

{% for message in chat_messages %}
  <div class="message-container {% if message.sender == request.user %}sent{% else %}received{% endif %}">
    <div class="message-bubble">
      {{ message.content }}
      <span class="message-time">{{ message.timestamp|date:"H:i" }}</span>
    </div>
  </div>
{% endfor %}

这个结构很简洁，外层的message-container用来控制整体位置，内层message-bubble是实际的消息框。

2. 核心CSS样式实现错位效果 #

这部分是关键，用Flex布局就能轻松控制左右留白，模拟你想要的砖墙错位样式：

/* 通用消息容器样式 */
.message-container {
  display: flex;
  margin: 8px 0;
  padding: 0 16px; /* 基础左右内边距，避免消息贴屏幕边缘 */
}

/* 发送方消息：让容器靠右对齐，气泡自然出现在右侧，左侧留空白 */
.message-container.sent {
  justify-content: flex-end;
}

/* 接收方消息：让容器靠左对齐，气泡出现在左侧，右侧留空白 */
.message-container.received {
  justify-content: flex-start;
}

/* 消息气泡的基础样式，让它更像聊天框 */
.message-bubble {
  max-width: 70%; /* 限制气泡宽度，避免过长撑满屏幕 */
  padding: 10px 14px;
  border-radius: 18px;
  background-color: #e5e5ea;
  position: relative;
}

/* 给发送方的气泡换个颜色，和接收方区分开 */
.message-container.sent .message-bubble {
  background-color: #0084ff;
  color: #fff;
}

/* 消息时间的样式，放在气泡右下角 */
.message-time {
  font-size: 12px;
  opacity: 0.7;
  display: block;
  text-align: right;
  margin-top: 4px;
}

原理很简单：通过justify-content属性控制气泡在容器内的位置，发送方的容器把气泡推到右边，接收方的容器把气泡推到左边，自然就形成了左右错位的空白区域。

3. 可选：强化砖墙条纹效果 #

如果想要更明显的“砖墙垂直条纹”感，可以给不同类的容器设置固定的左右外边距，比如：

.message-container.sent {
  margin-left: 20%; /* 左侧强制留20%的空白 */
  justify-content: flex-end;
}

.message-container.received {
  margin-right: 20%; /* 右侧强制留20%的空白 */
  justify-content: flex-start;
}

这样错位的视觉效果会更突出，记得调整message-bubble的max-width（比如改成75%），避免气泡和空白区域重叠。

内容的提问来源于stack exchange，提问作者Micah Pearce