聊天系统对齐

Question

（有关我想要的实时演示，请参阅底部的更新）

我有一个带聊天系统的在线游戏，但 CSS 很烂。

图像示例：

和两个代码示例 这里我使用了绝对与用户的位置，并且语音可以继续其他语音。

.speech-container {
  position:absolute;
  top:0;
  left:0;
  height:250px;
  background:rgba(0,0,0,.15);
  width:100%;
}

.speech {
  background:white;
  border:1px solid brown;
  padding:10px;
  border-radius:5px;
  position:absolute;
}

<div class="speech-container">
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:160px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:20px;top:110px">
    <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span>
  </div>
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
</div>

和“我想要的”演示 在这里我有我想要的但绝对的，不可能对列系统使用 flex 和 absolute 吗？

.speech-container {
  position:absolute;
  top:40px;
  left:0;
  height:250px;
  background:rgba(0,0,0,.15);
  width:100%;
}

.speech {
  background:white;
  border:1px solid brown;
  padding:10px;
  border-radius:5px;
  position:absolute;
}

<div class="speech-container">
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:210px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:20px;top:160px">
    <span><b>User1:</b> Testtttttttttttttttttttttttttttttttttttt (pronounced after the user2 speech)</span>
  </div>
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
</div>

<b>What I expect, use flex maybe?</b>

更新：我找到了我想要的游戏(Habbo)。

动图：

我该如何解决？

Answer 1

尝试这个 ！

https://jsfiddle.net/xstjqy8r/

.speech-container {
  position:absolute;
  top:40px;
  left:0;
  height:250px;
  background:rgba(0,0,0,.15);
  width:100%;
}

.speech {
  background:white;
  border:1px solid brown;
  padding:10px;
  border-radius:5px;
  display:block;
  width:60%;
  float:left;
}

.speech.blue {
  float:right;
}

.container-left {
  width:300px;
  display:block;
  position:absolute;
}

.container-right {
  width:300px;
  display:block;
  position:absolute;
  right:0px;
}

<div class="speech-container">
  <div class="container-left">
 
  <div class="speech red" style="left:20px;top:10px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech red" style="left:20px;top:60px">
    <span><b>User1:</b> Test</span>
  </div>
  <div class="speech blue" style="left:120px;top:10px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:60px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech blue" style="left:120px;top:110px">
    <span><b>User2:</b> Testttttt</span>
  </div>
  <div class="speech blue" style="left:120px;top:210px">
    <span><b>User2:</b> Hi</span>
  </div>
  <div class="speech red" style="left:20px;top:160px">
    <span><b>User1:</b> Testtttttt</span>
  </div>
  
  </div>
  <div class="container-right">
  <div class="speech blue" style="right:20px;top:15px">
    <span><b>User3:</b> Test</span>
  </div>
    </div>
</div>