博主信息
拾一枝櫻花的博客
博文
6
粉絲
0
評論
1
訪問量
2023
積分:0
P豆:14

聊天室布局

2019年11月20日 15:54:28閱讀數:184博客 / 拾一枝櫻花的博客 / css

Html

  1. <div class="mobile-page">
  2. <div class="admin-group">
  3. <img class="admin-img" src="img/60x60.gif"/>
  4. <div class="admin-msg">
  5. <i class="triangle-admin"></i>
  6. <pre class="admin-reply">測試Subject</pre>
  7. </div>
  8. </div>
  9. <div class="user-group">
  10. <div class="user-msg">
  11. <pre class="user-reply">了解了解</pre>
  12. <i class="triangle-user"></i>
  13. </div>
  14. <img class="user-img" src="img/60x60.gif"/>
  15. </div>
  16. </div>
  17. </div>

Css

  1. #service-list .mobile-page pre{ white-space: pre-wrap; word-wrap: break-word; }
  2. .mobile-page{ padding-bottom: 57px; height: 100%; overflow-y: scroll;}
  3. .mobile-page .admin-img, .mobile-page .user-img{ width: 45px; height: 45px; }
  4. 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; }
  5. .mobile-page i.triangle-admin{ left: 4px; border-right: 12px solid #fff; }
  6. .mobile-page i.triangle-user{ right: 4px; border-left: 12px solid #9EEA6A; }
  7. .mobile-page .admin-group, .mobile-page .user-group{ padding: 6px; display: flex; display: -webkit-flex; }
  8. .mobile-page .admin-group{ justify-content: flex-start; -webkit-justify-content: flex-start; }
  9. .mobile-page .user-group{ justify-content: flex-end; -webkit-justify-content: flex-end; }
  10. .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; }
  11. .mobile-page .admin-reply{ box-shadow: 0px 0px 2px #ddd; white-space: pre-line;}
  12. .mobile-page .user-reply{ text-align: left; background-color: #9EEA6A; box-shadow: 0px 0px 2px #bbb; white-space: pre-line; }
  13. .mobile-page .user-msg, .mobile-page .admin-msg{ width: 75%; position: relative; }
  14. .mobile-page .user-msg{ text-align: right; }

全部評論

文明上網理性發言,請遵守新聞評論服務協議

條評論
暫無評論暫無評論!
  • 足彩吧合买平台