在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/