如何制作通知页面？用户框布局问题求助

问题现状 #

目标是实现「左侧头像+右侧文字区域（含用户名、操作说明、关联内容、时间）」的规整消息卡片，但当前元素布局混乱，文字与头像挤压在一起，时间位置错误。尝试过max-height、position属性及尺寸调整均未解决。

修复方案 #

放弃容易引发布局冲突的float布局，改用Flexbox实现更可控的结构：

• 给消息卡片容器启用Flex布局，实现头像与文字区域的横向排列
• 将所有文字内容整合到一个独立容器中，便于统一管理间距与对齐方式
• 移除多余的float和position: relative属性，消除布局干扰
• 调整时间元素的定位，使其在文字区域底部靠右显示

修改后代码 #

CSS代码

body {
  text-align: center;
  background: hsl(210, 60%, 98%);
  font-family: sans-serif;
  margin: 0;
}

#Notifications-page {
  max-width: 500px; /* 限制最大宽度，避免过宽变形 */
  min-width: 300px;
  border-radius: 15px;
  margin: 5% auto; /* 水平居中 */
  padding: 10px;
  background-color: hsl(0, 0%, 100%);
}

.messages {
  display: flex; /* 启用Flex布局 */
  align-items: flex-start; /* 顶部对齐 */
  width: 90%;
  margin: 10px auto;
  padding: 15px;
  border-radius: 15px;
  background-color: white;
}

.unread-color {
  background-color: hsl(211, 68%, 94%);
}

.user-img {
  width: 50px; /* 固定头像尺寸，避免随容器缩放变形 */
  margin-right: 15px;
}

.message-content {
  flex: 1; /* 让文字区域占满剩余空间 */
  text-align: left;
}

.messages-h1 {
  font-size: 1.3rem;
  margin: 0 8px 0 0;
  font-weight: bold;
  display: inline; /* 用户名与操作说明同行显示 */
}

.P-1 {
  color: gray;
  display: inline; /* 与用户名同行 */
}

.P-2 {
  color: hsl(219, 12%, 42%);
  font-weight: bold;
  margin: 5px 0;
}

.P-3 {
  text-align: right;
  font-size: 0.8rem;
  color: gray;
  margin: 5px 0 0 0;
}

HTML代码

<section id="Notifications-page">
  <div class="messages unread-color">
    <img class="user-img" src="assets/images/avatar-nathan-peters on.webp" alt="Nathan Peterson">
    <div class="message-content">
      <p class="messages-h1">Nathan Peterson</p>
      <p class="P-1"> reacted to your recent post</p>
      <p class="P-2">5 end-game strategies to increase your win rate</p>
      <p class="P-3">2 weeks ago</p>
    </div>
  </div>
</section>

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