html - 聊天消息模板

Question

大家好我正在聊天，现在我必须处理生成消息，主要是我在 CSS 方面有问题，因为我想在消息 div(作者、文本和时间)中有 3 个 div，以及你可以看到，当文本太长时，文本和日期会下降，看起来很尴尬，我试图用绝对位置设置它，但我认为有更好的方法来修复它。

你能给我一些指示吗？

这是它的样子 http://jsbin.com/iPaYete/1/

Answer 1

DEMO你需要像这样更改你的css:

    p { margin:0; padding:0}
    .message {
        width: 100%;
        clear: both;
    }

    .author {
        color: blue; 
        margin-left: 20px; 
        font-weight: bold; 
        height: auto; 
        float: left;
    }

    .text {
        /*float: left; */
        margin-left: 90px;
        margin-right: 90px;
    }

    .time {
        vertical-align: top; 
        margin-right: 20px; 
        font-weight: bold; 
        font-size: 0.8em; 
        float: right;
    }

    .line {
        width: 80%;
        height: 1px;
        background-color: #CCCCCC;
        clear: both;

    margin: 0 auto;
}

HTMl 是这样的:

<div class="message">
    <div class="author">
        <p>guest1:</p>
    </div>
  <div class="time">
        <p>11:20:12<br />27/12/2013</p>
    </div>
    <div class="text">
        <p>Hello, can you tell me something about English language?</p>
    </div>

    <div class="line">

    </div>
</div>
<div class="message">
    <div class="author">
        <p>guest234:</p>
    </div>
  <div class="time">
        <p>11:21:41<br />27/12/2013</p>
    </div>
    <div class="text">
        <p>English is a West Germanic language that was first spoken in early medieval England and is now the most widely used language in the world.[4] It is spoken as a first language by the majority populations of several sovereign states, including the United Kingdom, the United States, Canada, Australia, Ireland, New Zealand and a number of Caribbean nations. It is the third-most-common native language in the world, after Mandarin Chinese and Spanish.[5] It is widely learned as a second language and is an official language of the European Union, many Commonwealth countries and the United Nations, as well as in many world organisations.</p>
    </div>

    <div class="line">

    </div>
</div>
</div>