CSS

Question

我正在开发一个聊天系统UI，我遇到了左右对齐项目的问题

我想在右侧显示我的消息，在左侧显示其他人的消息。

Current code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            margin: 5% auto;
            width: 40%;
            padding: 10px;
            margin-bottom: 40px;
            border: 1px solid red;
        }
        .chat {
            border: 1px ridge #34495e;
        }

        .msg-box {
            background: green;
            width: 50%;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="chat">
        <p class="border msg-box msg-my">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
        <p class="border msg-box">Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Vitae, accusan</p>
    </div>
</div>
</body>
</html>

注意只需要左右对齐，不需要样式元素。

示例：

Answer 1

这是解决方案：/

.msg-my {
    margin-left: auto;
}

Answer 2

.chat{
  display:flex;
  flex-direction:column;
  background: #f0f0f0;
  width: 400px;
}

.chat_bubble_container{
  display:flex;
  width: 400px;
}

.chat_bubble_container.incoming{
  justify-content: flex-start;
}

.chat_bubble_container.outgoing{
  justify-content: flex-end;
}

.chat_bubble_container .chat_bubble{
  display:flex;
  padding: 4px;
  border-radius: 5px;
  margin: 5px;
}

.chat_bubble_container.incoming .chat_bubble{
   background: #d1d1d1;
}

.chat_bubble_container.outgoing .chat_bubble{
   background: #429bd7;
  color: white;
}

<div class="chat">
  <div class="chat_bubble_container incoming">
    <div class="chat_bubble">Hi</div>
  </div>
  <div class="chat_bubble_container outgoing">
    <div class="chat_bubble">Hi</div>
  </div>
  <div class="chat_bubble_container incoming">
    <div class="chat_bubble">Lorem ipsum</div>
  </div>
  <div class="chat_bubble_container outgoing">
    <div class="chat_bubble">Lorem ipsum</div>
  </div>
</div>

Answer 3

也许这会让您入门：

https://codepen.io/riza-khan/pen/dyXjwoW

<div class="chat-container">
    <div class="me">Hi! How are you?</div>
    <div class="you">Hello! Great, and yourself?</div>
    <div class="me">Pretty good! How's the weather on your end?</div>
    <div class="you">Getting chilly, winter is almost here :)</div>
    <div class="me">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
    <div class="you">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi eos nemo totam illum consequuntur hic exercitationem laudantium ab doloribus debitis.</div>
</div>

.chat-container {
    display: flex;
    flex-direction: column;

    .me,
    .you {
        margin-top: 1.5rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    .me {
        margin-left: auto;
        border: solid 1px blue;
        max-width: 55%;
    }
    .you {
        margin-right: auto;
        border: solid 1px red;
        max-width: 55%;
    }
}

CSS - 需要基本聊天 ui

CSS - Need basic chat ui

html

tailwind-css