html - 如何分隔用户的消息并防止它们并排堆叠？

Question

1. 我需要将方框放在左边(对于一个用户)和右边(对于另一用户)。
2. 我想让盒子垂直堆叠。现在，当我展开窗口时，这些框会水平并排排列。

我的坏榜样 JS bin bad example下面的截图

html布局

<div class="chatwindow">
  <div class="chat">
    <div class="chat-other">
        <div class="chat-text"> chat content </div>
        <span class="chat-time"> 4.09 pm </span>
        <b>Other user</b>
    </div> 

    <div class="chat-mine"> <!-- content -->  </div> 
 </div>

CSS

.chatwindow {
   overflow-y:auto;
}

.chat-mine { 
   float: right;
   clear: left;
   max-width: 236px;
   display: inline-block; 
   text-align: left;
   position: relative;
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
   margin-bottom: 9px;
   margin: 6px;
   padding:3px;
   background-color: #66ffff;
}

.chat-other {
   clear: right; 
   max-width: 236px;
   position: relative;
   border-radius: 7px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
   margin-bottom: 9px;
   margin: 6px;
   padding:3px;
   background-color: #ffffff;
}

.chat-text {
  padding: 5px 7px;
  word-wrap: break-word;

  &::after {
    content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    display: inline;
  }
}

.chat-time {
  position: absolute;
  bottom: 2px;
  right: 7px;
}

我希望一侧有我的消息，另一侧有其他用户的消息。理想的例子: JS bin good example屏幕截图也如下所示:

不知道为什么，但我不能做 position: relative on both my div and other use div to have them aligned on both sides

Answer 1

您可以在您的答案 (.chat-mine) 上使用 float:right;，在其他用户的答案上使用 clear:right;答案(.chat-other)。