以HTML格式显示短信 - 带框

Question

有人可以建议如何在html中显示这种类型的消息聊天，其中消息显示在左侧和右侧的框中。屏幕右侧..？

框显示为蓝色＆amp;绿色

Answer 1

我会提供一些线索，以便您可以开展工作，我认为它可以帮助您：

HTML code：

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