如何实现SMS/Messenger样式的左右分栏消息展示布局？

完全可以通过修改样式实现需求，你的思路方向没问题，只是选错了布局方式——别用position:absolute，用Flexbox就能轻松搞定分栏和自适应，而且完全不用table。

核心思路 #

用Flexbox布局消息容器，通过align-self属性分别控制己方消息居右、对方消息居左，同时利用max-width让消息宽度自适应内容，不会撑满容器。这种方式不会让元素脱离文档流，自然不会出现重叠问题。

完整代码示例 #

HTML结构

<div class="chat-container">
  <div class="message from-them">
    嘿，今天晚上一起吃火锅吗？
  </div>
  <div class="message from-me">
    可以啊！几点？在哪？
  </div>
  <div class="message from-them">
    大概六点半，就在巷口那家老火锅店，我已经订好位置啦
  </div>
  <div class="message from-me">
    好的，我下班直接过去～
  </div>
</div>

CSS样式

.chat-container {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 消息之间的间距 */
  padding: 16px;
  max-width: 400px; /* 模拟手机宽度 */
  margin: 0 auto;
  background-color: #f0f0f0;
}

.message {
  padding: 8px 12px;
  border-radius: 18px;
  line-height: 1.4;
  max-width: 70%; /* 限制消息最大宽度，避免过长 */
  word-wrap: break-word; /* 长文本自动换行 */
}

.from-them {
  align-self: flex-start;
  background-color: #e5e5ea;
  color: #000;
  border-bottom-left-radius: 4px; /* 对方消息左下角不圆角，贴近Messenger风格 */
}

.from-me {
  align-self: flex-end;
  background-color: #007aff;
  color: #fff;
  border-bottom-right-radius: 4px; /* 己方消息右下角不圆角 */
}

关键细节说明 #

1. align-self：单独调整Flex子元素在交叉轴上的位置，flex-start靠左、flex-end靠右，完美实现分栏效果。
2. max-width：限制消息最大宽度，长文本自动换行，保证布局美观的同时，宽度随内容自动收缩。
3. gap：替代margin避免相邻元素间距重叠，更简洁地控制消息间的空隙。
4. 不用position:absolute是因为它会让元素脱离正常文档流，父容器无法计算其高度，必然导致重叠；而Flexbox在文档流内布局，所有元素都会占据对应空间，不会出现这个问题。

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