小程序里聊天对话框布局代码

以下是一个简单的聊天对话框布局代码示例：

<!-- 聊天对话框容器 -->
<div class="chatbox">
  <!-- 左侧聊天气泡 -->
  <div class="bubble left">
    <p>这是左侧的一条消息</p>
  </div>
  <!-- 右侧聊天气泡 -->
  <div class="bubble right">
    <p>这是右侧的一条消息</p>
  </div>
  <!-- 更多聊天气泡 -->
  <!-- ... -->
</div>

其中，`.chatbox` 是聊天对话框的容器，`.bubble` 是聊天气泡的样式，`.left` 和 `.right` 则分别表示左侧和右侧的聊天气泡。

你可以使用 CSS 样式来美化聊天对话框的外观，例如：

.chatbox {
  max-width: 600px;
  margin: 0 auto;
}

.bubble {
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 16px;
}

.left {
  background-color: #f1f0f0;
}

.right {
  background-color: #0099ff;
  color: #fff;
  text-align: right;
}

以上样式代码可以让聊天对话框看起来更加美观。当然，具体的样式可以根据你的需求进行调整。