如何在聊天界面中镜像css中的div

Question

我正在尝试构建一个聊天ui，我想在其中镜像div并将其放置在右侧，请参见下图，就像聊天ui一样，我想将发送消息放置在右侧。我可以根据位置进行操作，但我想像接收消息一样翻转，但位置不同。。

当前图像

代码

.private_chat_receive_div {
margin: 0.5vw;
background-color: #282835;
padding: 1vw;
width: fit-content;
border-radius: 0.8vw;
position: relative;
left: 0.5vw;
top: 1vw;
}
.private_chat_send_div {
margin: 0.5vw;
background-color: #282835;
padding: 1vw;
width: fit-content;
border-radius: 0.8vw;
position: relative;
left: 0.5vw;
top: 1vw;
}
#private_chat_receive_message {
font-family: 'Lato', sans-serif;
font-size: 1.35vw;
max-width: 15vw;
font-size: 1.3vw;
}
#private_chat_send_message {
font-family: 'Lato', sans-serif;
font-size: 1.35vw;
max-width: 15vw;
}

Answer 1

您需要将div包装到一个容器中，并向其中添加display: flex;。然后您可以在.private_chat_send_div上使用align-self: flex-end;属性。

.container{
width: 99vw;
display: flex;
flex-direction: column;
}

.private_chat_receive_div {
margin: 0.5vw;
background-color: #282835;
padding: 1vw;
width: 15vw;
border-radius: 0.8vw;
position: relative;
top: 1vw;
left: 0.5vw;
color: #fff;
}
.private_chat_send_div {
margin: 0.5vw;
background-color: #282835;
padding: 1vw;
width: 15vw;
border-radius: 0.8vw;
position: relative;
right: 0.5vw;
top: 1vw;
color: #fff;
margin-right: 0.5vw;
align-self: flex-end;
}
#private_chat_receive_message {
font-family: 'Lato', sans-serif;
font-size: 1.35vw;
max-width: 15vw;
font-size: 1.3vw;
}
#private_chat_send_message {
font-family: 'Lato', sans-serif;
font-size: 1.35vw;
max-width: 15vw;
}

<div class="container">
<div class="private_chat_receive_div">
<span id="private_chat_receive_message">Receive</span>
</div>
<div class="private_chat_send_div">
<span id="private_chat_send_message">Send</span>
</div>
</div>