如何在聊天的左侧显示消息

<div id="chat-container">
  <ul id="message-container"></ul>
</div>

#chat-container {
  width: 300px;
  height: 400px;
  background-color: #f2f2f2;
  position: relative;
}

#message-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
}

.message-item {
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
  float: left;
}

.message-item img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.message-item span {
  font-size: 12px;
  color: #999;
}

// 假设有一个消息数组
const messages = [
  { content: 'Hello', sender: 'user', timestamp: '2022-01-01 10:00:00' },
  { content: 'Hi', sender: 'bot', timestamp: '2022-01-01 10:01:00' },
  // ...
];

// 获取消息容器
const messageContainer = document.getElementById('message-container');

// 添加消息到容器中
messages.forEach(message => {
  const messageItem = document.createElement('li');
  messageItem.className = 'message-item';

  if (message.sender === 'user') {
    const avatar = document.createElement('img');
    avatar.src = 'user-avatar.png';
    messageItem.appendChild(avatar);
  } else {
    const avatar = document.createElement('img');
    avatar.src = 'bot-avatar.png';
    messageItem.appendChild(avatar);
  }

  const content = document.createElement('span');
  content.textContent = message.content;
  messageItem.appendChild(content);

  const timestamp = document.createElement('span');
  timestamp.textContent = message.timestamp;
  messageItem.appendChild(timestamp);

  messageContainer.appendChild(messageItem);
});

// 滚动到最新消息
messageContainer.scrollTop = messageContainer.scrollHeight;