css 样式写对话

    

      
      

        
        
 客户
        

          哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        
      
      
      

        
        
张三
        

          呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
        
      
    

// 对话样式
.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