如何用HTML/CSS实现删除子元素后保留原位置的布局

核心问题在于默认的弹性布局（如flex）会让剩余元素自动填充空间，要实现删除元素后保留原位置，关键是给每个孙元素预留固定的“位置槽”，即使元素删除，槽位宽度仍保持不变。推荐用Grid布局实现，代码简洁且效果稳定。

实现代码 #

HTML结构 #

<div class="container">
  <!-- 左侧占比6的区域 -->
  <div class="left-section">
    <div class="text-box">Text Box 1</div>
    <!-- 注释掉第二个text-box，模拟删除 -->
    <!-- <div class="text-box">Text Box 2</div> -->
    <div class="text-box">Text Box 3</div>
  </div>

  <!-- 右侧占比4的区域 -->
  <div class="right-section">
    <!-- 注释掉第一个button，模拟删除 -->
    <!-- <button class="btn">Button 1</button> -->
    <button class="btn">Button 2</button>
  </div>
</div>

CSS样式 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 父容器：实现左右6:4的比例划分 */
.container {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 20px;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 左侧子容器：给3个text-box预留固定槽位 */
.left-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* 右侧子容器：给2个button预留固定槽位 */
.right-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* 孙元素样式 */
.text-box {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.btn {
  padding: 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

关键原理 #

1. 父容器的6:4划分：通过grid-template-columns: 6fr 4fr实现左右区域的比例分配，fr单位会自动按比例分配剩余空间。
2. 孙元素的固定槽位：左右子容器分别用repeat(3, 1fr)和repeat(2, 1fr)创建固定数量的等宽列，无论列内是否有元素，列的宽度始终保持一致。删除元素后，对应的列仅为空槽，不会触发其他元素的拉伸。

备选Flex方案（需额外嵌套） #

如果必须使用Flex，需要给每个孙元素添加外层占位容器，强制保留宽度：

.left-section {
  display: flex;
  gap: 15px;
}

.text-box-wrapper {
  width: calc(33.333% - 10px); /* 减去gap的分摊宽度 */
}

.text-box {
  width: 100%;
  /* 其他样式不变 */
}

HTML结构需调整为：

<div class="left-section">
  <div class="text-box-wrapper">
    <div class="text-box">Text Box 1</div>
  </div>
  <div class="text-box-wrapper">
    <!-- 空的占位容器 -->
  </div>
  <div class="text-box-wrapper">
    <div class="text-box">Text Box 3</div>
  </div>
</div>

这种方法需要额外嵌套，维护成本高于Grid方案，仅作为兼容旧环境的备选。

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