css聊天气泡

html:

<div id="dmTestDialog">
    <div class="right">
        <div class="img">
            <img src="/static/image/user.png"/>
        </div>
        <div class="border"></div>
        <div class="text">
            我想去北京
        </div>
    </div>
    <div class="clear"></div>
    <div class="left">
        <div class="img">
            <img src="/static/image/robot.png"/>
        </div>
        <div class="border"></div>
        <div class="text">
            你想几号出发
        </div>
    </div>

<div class="clear"></div>

</div>

css:

#dmTestDialog {
    margin-top:10px;
    max-height:500px;
    overflow:auto;
    border-bottom:1px solid black
}
#dmTestDialog .left{
    float:left;
    max-width:90%;
    padding:10px 0px;
}
#dmTestDialog .left .img{
    float:left;
    width:40px;
}
#dmTestDialog .left .text{
    margin-left:48px;
    background-color:#FFFFFF;
    padding:5px;
}
#dmTestDialog .left .border {
    float:left;
    border-top: 4px solid transparent;
    border-right: 8px solid #FFFFFF;
    border-bottom: 4px solid transparent;
    margin-top:12px;
}
#dmTestDialog .right{
    float:right;
    max-width:90%;
    padding:10px 0px;
}
#dmTestDialog .right .img{
    float:right;
    width:40px;
}
#dmTestDialog .right .text{
    margin-right:48px;
    background-color:#ADFF2F;
    padding:5px;
}
#dmTestDialog .right .border {
    float:right;
    border-top: 4px solid transparent;
    border-left: 8px solid #ADFF2F;
    border-bottom: 4px solid transparent;
    margin-top:12px;
}
#dmTestDialog .clear{
    clear:both;
}

#dmTestDialog img{
    width:40px;
}