聊天系统对齐

时间:2017-08-07 09:35:10

标签: javascript jquery css alignment

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

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

图片示例:

What I want

problem with absolute

without absolute

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

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

Live demo wanted

我该如何解决?

1 个答案:

答案 0 :(得分:1)

试试这个!

https://jsfiddle.net/xstjqy8r/

npmjs
.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;
}