以 HTML 格式显示文本消息 - 带框答案

【问题标题】：Display text messages in HTML -- with boxes以 HTML 格式显示文本消息 - 带框
【发布时间】：2014-12-26 04:04:03
【问题描述】：

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

框以蓝色和绿色显示

【问题讨论】：

我只想知道如何以蓝色和浅绿色显示这些框。

标签： html

【解决方案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/

【讨论】：

我可以在运行时更改 div 的类吗...？
你可以，使用 Javascript，这里有一些关于它的主题：stackoverflow.com/questions/7941276/… 或 stackoverflow.com/questions/22576927/…
感谢您的回答......还有一件事是可以将盒子的角落变圆并沿着垂直墙壁添加一个尖头形状（使用css）......如我发布的图片所示...它会给它一个聊天框的外观..？
这是我的代码：jsfiddle.net/54vgn2um/17 这是我认为的主要问题。也许打开一个新线程是个好主意，因为我们现在是一个感人的 javascript。
类似这样的：jsfiddle.net/54vgn2um/23 使用左/右属性。顺便说一句，你投票给我的一个 cmets 是有用的，而不是答案......