聊天系统对齐

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

GIF：

我该如何解决这个问题？

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>