在HTML中顯示文本消息 - 帶有框

Question

有人可以建議如何在html中顯示這種類型的消息聊天，其中消息顯示在屏幕右側的&左側的框中。

盒以藍色顯示&綠色

Answer 1

我會提供一些線索，所以你可以在它的工作，我認爲它可以幫助你：

HTML代碼：

<div class="blue_box"> 
    <span>Hello</span> 
</div> 
<div class="green_box"> 
    <span>Bye</span> 
</div> 

CSS：

.blue_box, .green_box { 
    display: block; 
    clear:both; 
} 
.blue_box span { 
    background-color: blue; 
    color: white; 
    padding: 10px 5px; 
    display: block; 
    float: right; 
} 
.green_box span { 
    background-color: green; 
    color: white; 
    padding: 10px 5px; 
    display: block; 
    float: left; 
} 

希望它有幫助，

這裏是看到它運行的小提琴。

http://jsfiddle.net/54vgn2um/2/