CSS逻辑属性与对称布局实例页面

展示

代码

• HTML：

  <div class="msg-list">
      <header class="msg-header">CSS逻辑属性学习群</header>
      <section class="msg-item">
          <img class="msg-avator" alt="桐须真冬" src="../images/bg-1.jpg">
          <div class="msg-info">
              <span class="msg-user">桐须真冬</span>
              <div class="msg-txt">
                  <p>关于CSS逻辑属性的学习，大家有什么不懂的直接在群里问唯我同学吧。</p>
              </div>
          </div>
      </section>
      <section class="msg-item">
          <img class="msg-avator" alt="古桥文乃" src="../images/bg-2.jpg">
          <div class="msg-info">
              <span class="msg-user">古桥文乃</span>
              <div class="msg-txt">
                  <p>好的</p>
              </div>
          </div>
      </section>
      <section class="msg-item">
          <img class="msg-avator" alt="绪方理珠" src="../images/bg-3.jpg">
          <div class="msg-info">
              <span class="msg-user">绪方理珠</span>
              <div class="msg-txt">
                  <p>o</p>
              </div>
          </div>
      </section>
      <section class="msg-item">
          <img class="msg-avator" alt="武元润香" src="../images/bg-4.jpg">
          <div class="msg-info">
              <span class="msg-user">武元润香</span>
              <div class="msg-txt">
                  <p>没问题哟~</p>
              </div>
          </div>
      </section>
      <section class="msg-item" data-self>
          <img class="msg-avator" alt="唯我成幸" src="../images/bg-5.jpg">
          <div class="msg-info">
              <span class="msg-user">唯我成幸</span>
              <div class="msg-txt">
                  <p>大家有什么想要了解的吗？</p>
              </div>
          </div>
      </section>
  </div>

• CSS：

  .msg-header {
      line-height: 48px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      background-color: #222;
      margin-bottom: 10px;
  }
  .msg-list {
      width: 414px;
      max-width: 100vw;
      margin-left: auto; margin-right: auto;
      background-color: #ebebeb;
      overflow: hidden;
  }
  .msg-item {
      display: flex;
      padding: 7px;
      margin-bottom: 15px;
      margin-inline-end: 44px;
  }
  .msg-avator {
      width: 44px; height: 44px;
      border-radius: 50%;
      object-fit: cover;
  }
  .msg-info {
      flex: 1;
      text-align: start;
      padding: 0 10px;
      overflow: hidden;
  }
  .msg-user {
      font-size: 13px;
      color: #949ead;
  }
  .msg-txt {
      position: relative;
      width: -moz-fit-content;
      width: fit-content;
      background: #fff;
      border-color: #fff;
      font-size: 14px;
      line-height: 1.5;
      color: #000;
      padding: .6em 1em;
      margin: 5px 0 0;
      border-radius: 6px;
  }
  .msg-txt > p {
      unicode-bidi: plaintext;
  }
  .msg-user + .msg-txt::before{
      content: "";
      position: absolute;
      border: .5rem solid transparent;
      border-top-color: inherit;
      border-inline-end-color: inherit;
      margin-inline-start: calc(-.45rem - 1em);
      top: 4px;
  }
  /* 自己 */
  .msg-item[data-self]{
      direction: rtl;
  }
  .msg-item[data-self] .msg-txt {
      background: #9CE553;
      border-color: #9CE553;
  }