聊天消息模板

Question

嗨，伙计们，我正在聊天，现在我必须处理产生消息的问题，主要是我对CSS有问题，因为我想在message (作者，文本和时间)内部有3个div，你可以看到，当文本太长时，文本和日期就会下降，看起来很尴尬，我试图设置它的绝对位置，但我认为有一个更好的方法来解决它。

你能告诉我该怎么做吗？

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

Answer 1

演示您需要像这样更改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>