如何将class为container的div对齐为消息对话样式？

需要实现对话消息线程：

• .container类容器（接收消息）显示在屏幕左侧
• .container.darker类容器（发送消息）显示在屏幕右侧

目前两个容器均居中显示，容器内文本对齐方式正确（分别左对齐、右对齐），不改动文本位置，仅调整容器位置。理想效果如下：

++++++++++++++++++++++++++++++++++++
         +Container                         +
         +                                  +
         ++++++++++++++++++++++++++++++++++++

                                       ++++++++++++++++++++++++++++++++++++
                                       +                  Container darker+
                                       +                                  +
                                       ++++++++++++++++++++++++++++++++++++

当前代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,"/>
<meta charset="UTF-8"/>
<style>
body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}

.darker {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right
}

.container::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Chat Messages</h2>

<div class="container">
<p>' (123)456-7890 '</p>
<p>'Hello!'&lt;/p>
<p>'10/10/2022 @ 15:00:00'</p>
</div>

<div class="container darker">
<p>' (123)456-0987 '</p>
<p>'Hi!'&lt;/p>
<p>'10/10/2022 @ 15:00:07'</p>
</div>

</body>
</html>

仅调整CSS样式，无需改动HTML结构：

1. 给.container添加浮动和最大宽度，让接收消息容器靠左且限制宽度
2. 给.darker添加右浮动，让发送消息容器靠右

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,"/>
<meta charset="UTF-8"/>
<style>
body {
  margin: 0 auto;
  max-width: 800px;
  padding: 0 20px;
}

.container {
  border: 2px solid #000000;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
  /* 新增：靠左浮动 + 限制最大宽度 */
  float: left;
  max-width: 70%;
}

.darker {
  border-color: #000000;
  background-color: #0077ff;
  text-align: right;
  /* 新增：靠右浮动 */
  float: right;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

/* 可选：给聊天区域添加清除浮动，避免后续内容错位 */
.chat-container::after {
  content: "";
  display: block;
  clear: both;
}
</style>
</head>
<body>

<h2>Chat Messages</h2>

<!-- 可选：给所有消息加一个父容器，方便清除浮动 -->
<div class="chat-container">
  <div class="container">
  <p>' (123)456-7890 '</p>
  <p>'Hello!'&lt;/p>
  <p>'10/10/2022 @ 15:00:00'</p>
  </div>

  <div class="container darker">
  <p>' (123)456-0987 '</p>
  <p>'Hi!'&lt;/p>
  <p>'10/10/2022 @ 15:00:07'</p>
  </div>
</div>

</body>
</html>

改动说明 #

• float: left：让接收消息容器靠左对齐
• float: right：让发送消息容器靠右对齐
• max-width: 70%：限制消息容器宽度，避免过长，更符合聊天场景
• 新增.chat-container父容器并添加清除浮动样式：防止后续页面元素因浮动出现错位问题（可选但推荐）

内容的提问来源于stack exchange，提问作者John_A