使用insertAdjacentHTML实现收件箱消息布局时重叠问题求助

问题根源 #

你当前代码使用绝对定位布局，导致所有消息行内的日期、发件人、消息文本都脱离文档流，固定在同一位置；同时.inbox-line的top:20px相对定位设置，会让新插入的消息行和旧行重叠，无法实现逐行排列。

解决方案：用Grid布局重构（无需大幅修改HTML） #

Grid布局非常适合这种类似邮件列表的列对齐需求，能轻松实现每行三列的规整布局，同时让消息行自动垂直排列，不会重叠。

修改后的完整代码 #

HTML

<div class="inbox-row">
  <!-- 新消息会动态插入到这里 -->
</div>

<button class="compose-message-send">Send</button>

CSS

/* 收件箱容器，负责垂直排列所有消息行 */
.inbox-row {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 消息行之间的间距 */
}

/* 单条消息行，用Grid实现三列布局 */
.inbox-line {
  display: grid;
  grid-template-columns: 120px 150px 1fr; /* 日期列宽120px，发件人150px，消息列占剩余空间 */
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee; /* 可选：添加分隔线增强可读性 */
}

/* 移除所有绝对定位样式，让元素回到文档流 */
.inbox-row-date,
.inbox-row-sender,
.inbox-row-message {
  margin: 0;
}

JavaScript

const btnComposeMessageSend = document.querySelector(".compose-message-send");
const inboxRow = document.querySelector(".inbox-row");

const updateInbox = function() {
  const html = `
    <div class="inbox-line">
      <p class="inbox-row-date">02/03/23</p>
      <p class="inbox-row-sender">Greg Piercer</p>
      <p class="inbox-row-message">Hello There</p>
    </div>
  `;
  // 把新消息插入到容器末尾，而不是容器外面
  inboxRow.insertAdjacentHTML("beforeend", html);
};

btnComposeMessageSend.addEventListener("click", function(e) {
  updateInbox();
});

关键改动说明 #

• 移除所有position: absolute和position: relative的错位设置，让元素回到正常文档流
• 用flex-direction: column让.inbox-row垂直排列所有消息行，gap控制行间距
• 给.inbox-line设置Grid布局，通过grid-template-columns定义三列宽度，实现列对齐
• 修改JS的插入位置为beforeend，确保新消息追加在容器内部，继承容器的布局规则

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