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; }