次のモックアップを動作する動的コードに転送しようとしていますが、現在いくつか問題があります。
モックアップ：http：//www.imagebanana.com/view/a6yuqvgm/chat.png
ここでの目標は、メッセージが少し重なるように、各メッセージボックスにある「負のマージン」を実装することです。したがって、Aさん（私）とBさんが会話をしている場合、Bさんからのメッセージはすべて右側に、私のメッセージ（Aさん）はすべて左側に配置する必要があります。この部分は明らかにかなり簡単です。
また、チャットパートナーからのメッセージに応答する場合、メッセージは負のマージンを持っている必要があります。これにより、メッセージはパートナーからのメッセージに「入り」ますが、反対側になります。これは、設計とスペース節約の理由によるものです。メッセージが長いほど、マージンを大きくする必要があります。短いメッセージは、マージンを小さくする必要があります。
私は現在、そのようなことをうまく実装する方法に戸惑っています。ユーザーが2つのメッセージを続けて送信すると、メッセージが重複するため（2番目のメッセージが最初のメッセージに入る）、単純な負のマージンでは不十分です。モックアップは完璧な状況、回転メッセージ（人物A、人物B、人物A、人物Bなど）を示していますが、それが常に当てはまるとは限りません。
今の私の質問は、それは純粋なCSSでも可能ですか？PHPまたはJSのいずれかで動的な部分を追加する必要があると思いますが、どちらも問題ありません。正しい方向へのヒントが必要です。