消息/聊天系统，每条消息的保证金为负

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。长短安全检查不会将负余量设置为大于上一条消息的某个百分比（在我的示例中为80）。