css 样式写对话

<!-- 录音对话 -->
    <div class="dialogue">
      <!-- 客户 -->
      <div class="client">
        <!-- 头像、姓名 -->
        <div><img :src="client" class="leftDetailsImg2" /> <span>客户</span></div>
        <div style="width:65%;">
          哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </div>
      </div>
      <!-- 置业顾问 -->
      <div class="counselor">
        <!-- 头像、姓名 -->
        <div><span>张三</span><img :src="counselor" class="leftDetailsImg2" /></div>
        <div style="width:65%;">
          呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
        </div>
      </div>
    </div>

// 对话样式
.dialogue {
padding-left: 10px;
font-size: 12px;
border: 1px solid red;
//第一步
display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.leftDetailsImg2{
width: 20px;
height: 20px;
vertical-align: middle;
}
// 置业顾问(自己)对话容器
.counselor{
//第二步
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;
}
// 客户(他人)对话容器
.client{
//第三步
display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.leftDetailsImg2{
width: 20px;
height: 20px;
vertical-align: middle;
}

效果图

Snipaste_2022-02-14_14-53-42.png