如何分隔用户的邮件并防止它们并排堆叠？

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 截图也显示如下：



不确定为什么，但我不能做位置：我的div和其他使用div的亲戚让它们在两边对齐

Answer 1

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