Mostrar as mensagens de texto em HTML-com caixas

Question

Mostrar as mensagens de texto em HTML-com caixas

Alguém pode sugerir como mostrar este tipo de conversação de mensagens em html, onde as mensagens são mostradas em caixas à esquerda e à direita do ecrã ..?

As caixas são apresentadas em azul e verde

General example - of chat

0

html5

Author: Katoch, 2014-10-30

Source

1 answers

score 1 · Accepted Answer

Vou dar algumas pistas para que possas trabalhar nisso, acho que te pode ajudar.

Código 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;
}

Espero que ajude. Aqui está um violino para vê-lo a correr.

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