聊天系統對準

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>