javascript – 聊天系统对齐

2023年11月1日 128次阅读

(请参阅底部的更新,了解我想要的实时演示)

我有一个聊天系统的在线游戏,但CSS很糟糕.

图像示例：

《javascript – 聊天系统对齐》

《javascript – 聊天系统对齐》

《javascript – 聊天系统对齐》

还有两个代码示例
在这里,我使用绝对用户的位置,并且演讲可以在其他演讲中进行.

.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和绝对的柱系统？

.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：

《javascript – 聊天系统对齐》

我该如何解决这个问题？

最佳答案 试试这个 ！

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>
点赞