聊天室布局

Html

<div class="mobile-page">
    <div class="admin-group">
        <img class="admin-img" src="img/60x60.gif"/>
        <div class="admin-msg">
            <i class="triangle-admin"></i>
            <pre class="admin-reply">测试Subject</pre>
        </div>
        </div>
        <div class="user-group">
            <div class="user-msg">
                <pre class="user-reply">了解了解</pre>
                <i class="triangle-user"></i>
            </div>
            <img class="user-img" src="img/60x60.gif"/>
        </div>
    </div>
</div>

Css

#service-list .mobile-page pre{ white-space: pre-wrap; word-wrap: break-word; }
.mobile-page{ padding-bottom: 57px; height: 100%; overflow-y: scroll;}
.mobile-page .admin-img, .mobile-page .user-img{ width: 45px; height: 45px; }
i.triangle-admin,i.triangle-user{ width: 0; height: 0; position: absolute; top: 10px; display: inline-block; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.mobile-page i.triangle-admin{ left: 4px; border-right: 12px solid #fff; }
.mobile-page i.triangle-user{ right: 4px; border-left: 12px solid #9EEA6A; }
.mobile-page .admin-group, .mobile-page .user-group{ padding: 6px; display: flex; display: -webkit-flex; }
.mobile-page .admin-group{ justify-content: flex-start; -webkit-justify-content: flex-start; }
.mobile-page .user-group{ justify-content: flex-end; -webkit-justify-content: flex-end; }
.mobile-page .admin-reply, .mobile-page .user-reply{ display: inline-block; padding: 8px; border-radius: 4px; background-color: #fff; margin:0 15px; font-size: .8rem; }
.mobile-page .admin-reply{ box-shadow: 0px 0px 2px #ddd; white-space: pre-line;}
.mobile-page .user-reply{ text-align: left; background-color: #9EEA6A; box-shadow: 0px 0px 2px #bbb; white-space: pre-line; }
.mobile-page .user-msg, .mobile-page .admin-msg{ width: 75%; position: relative; }
.mobile-page .user-msg{ text-align: right; }