消息/聊天系统，为每个消息

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）。