css实现聊天室，双方内容实现对方在左下，用户在右上

要实现聊天室中双方内容的布局，可以使用CSS中的flexbox布局和CSS transform属性来实现。下面是一个简单的示例：

HTML代码：

<div class="chat-container">
  <div class="chat-left">
    <div class="chat-bubble">
      <!-- 左侧聊天内容 -->
    </div>
  </div>
  <div class="chat-right">
    <div class="chat-bubble">
      <!-- 右侧聊天内容 -->
    </div>
  </div>
</div>

CSS代码：

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-grow: 1;
}

.chat-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-grow: 1;
}

.chat-bubble {
  max-width: 80%;
  padding: 10px;
  border-radius: 10px;
  margin: 5px;
}

.chat-left .chat-bubble {
  background-color: #f2f2f2;
  transform: rotateY(180deg);
}

.chat-right .chat-bubble {
  background-color: #4CAF50;
  color: white;
}

在上面的示例中，我们使用了flexbox布局，并将.chat-container元素设置为flex容器，然后将其高度设置为100%。接着，我们将.chat-left和.chat-right元素的flex-grow属性都设置为1，表示它们占据相同的空间。然后，我们使用justify-content和align-items属性来控制双方内容的位置。在.chat-left和.chat-right中，我们使用了transform: rotateY(180deg)来将左侧的内容翻转，并改变其方向，这样就可以实现左下右上的布局了。最后，我们对.chat-bubble元素进行了样式设置，使其看起来像一个聊天气泡。