聊天系统对齐
聊天系统对齐
提问于 2017-08-07 09:35:09
(关于我想要的内容的现场演示，请参见底部的更新)
我有一个网络游戏与聊天系统，但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和绝对值吗？
.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)。
全球一体化框架：
我怎么才能解决呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-15 12:48:07
试试这个！
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45543702
复制相关文章
相似问题
腾讯云开发者
