每条消息都有负边距的消息/聊天系统

Question

我正在尝试将以下模型转换为工作动态代码，但我现在遇到了一些问题。

样机：http://www.imagebanana.com/view/a6yuqvgm/chat.png

这里的目标是实现每个消息框的“负边距”，以便消息重叠一点。因此，如果 A 人（我）和 B 人进行对话，那么来自 B 人的所有消息都应该在右侧，而我的所有消息（A 人）都应该在左侧。这部分显然比较简单。

另外，如果我回复来自聊天伙伴的消息，我的消息应该有一个负边距，以便我的消息有点“进入”来自我的伙伴的消息，但在另一边。这是出于设计和节省空间的原因。消息越长，边距应该越大。较短的消息需要有较小的边距。

我目前对如何成功实施这些事情感到困惑。一个简单的负边距是不够的，因为当用户连续发送两条消息时，消息会重叠（第二条进入第一条）。模型显示了完美的情况，旋转消息（A 人、B 人、A 人、B 人等），但显然情况并非总是如此。

我现在的问题是，纯 CSS 是否也能做到这一点？我想我需要在 PHP 或 JS 中添加一些动态部分，两者都可以。我只需要一些正确方向的提示。

Answer 1

你可以在纯 CSS 中做到这一点如果你不需要根据每条消息的高度调整边距。这两种情况的关键是使用相邻 (+) 选择器来定位到消息之后的来自消息，反之亦然，避免来自同一个人的连续消息之间的重叠。

方法如下：http://jsbin.com/ujonoj/14/edit

注意 CSS 的注释部分：如果需要，您可以使用它来获得静态负边距（无论您想要多少）并避免使用 JS。

编辑 - 添加了两项安全检查以涵盖非常长的消息跟随非常短的消息的情况，并停止 setMargin 在连续的 to-to/from-from 消息上运行。多空安全检查根本不会将负边距设置为大于上一条消息的某个百分比（在我的示例中为 80）。