模板:人物对话/styles.css

.shipChat { position: relative; min-height: 80px; font-family: 微软雅黑; text-align:left; margin-top:5px; margin-bottom:5px; width: 625px } .shipChat .head_wrap, .shipChat .head_bg { position: absolute; border-radius: 35px; left: 0; top: 5px; width: 70px; height: 70px; } .shipChat.右 .head_wrap, .shipChat.右 .head_bg { left: auto;

  right:0;

} .shipChat .head_wrap { overflow: hidden; } .shipChat .head_wrap img { width: 70px; height: 70px; } .shipChat .head_bg { box-sizing: border-box; background: #333333; border: 3px solid #777777; } .shipChat .chatBox { margin-left: 110px; width: 515px; position: relative; padding-top: 28px; } .shipChat.右 .chatBox { margin-left: 0px; margin-right: 110px; } .shipChat .chat_textbox { min-height: 47px; width:100%; border-radius: 6px; background: #4a4a4a; padding: 13px 12px; color: white; font-size: 105%; } .shipChat .chat_title { position: absolute; left: 0; top: 0; padding:4px; } .shipChat.右 .chat_title { left: auto!important; right: 0; } .shipChat .chat_remark { position: absolute; right: 0; top:0; padding-top:6px; font-size: 85%; color: gray; } .shipChat.右 .chat_remark { left: 0;

  right:100%;

} .shipChat .arrow { position: absolute; left: -15px; top: 44px; width: 0; height: 0; border-top: 15px solid #4a4a4a; border-left: 15px solid transparent; } .shipChat.右 .arrow { left: 100%;

  right: -15px!important;

border-left: 0; border-right: 15px solid transparent; } /*手机适配尝试，尚有问题*/ @media (max-width: 450px) {

 .shipChat {
    width:100%;
 }
 .shipChat .chat_textbox {
    width:60vw;
 }
 .shipChat .chat_remark {
   left:50vw;
 }
 .shipChat.右 .chat_title {
    right:30vw;
 }
 .shipChat.右 .arrow {
    left:60vw;
 }

}