如何将父div内的子div移动到main div的相邻位置

API 探路者

2026-9-24

实现方案

要将目标模块移动到main div旁侧，可根据你的项目兼容需求选择以下方案：

方案1：Flex布局（优先推荐，兼容性好、易维护）

给main div和目标侧边模块套一层共同父容器，添加以下CSS：

/* 共同父容器样式 */
.wrapper {
  display: flex;
  gap: 24px; /* 两个模块间的间距，可自行调整 */
  align-items: flex-start; /* 避免模块高度互相拉伸，不需要可删除 */
}
/* main div样式，占剩余宽度 */
.main {
  flex: 1;
}
/* 目标侧边模块样式，固定宽度按需调整 */
.side-module {
  width: 300px;
}

如需移动端适配为上下排布，追加以下媒体查询：

@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
  .side-module {
    width: 100%;
  }
}

方案2：Grid布局（适合复杂多列布局场景）

同样给两个模块套共同父容器，添加CSS：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px; /* 左侧占剩余宽度，右侧固定300px，比例可自行调整 */
  gap: 24px;
}

方案3：浮动布局（仅用于兼容老项目，不推荐新业务使用）

.main {
  float: left;
  width: calc(100% - 324px); /* 总宽度减去侧边宽度加间距 */
}
.side-module {
  float: right;
  width: 300px;
}
/* 父容器清除浮动，避免高度塌陷 */
.wrapper::after {
  content: "";
  display: block;
  clear: both;
}