聊天系统对准

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和绝对的一列系统？

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