如何让两个div同步缩放且不堆叠？响应式网页布局求助

要让#normMem和#delMem同步缩放且不堆叠，核心是给它们的父容器设置弹性布局（Flexbox）或网格布局（Grid），这两种方式能直接控制子元素的排列规则，比单纯设置max-width更有效。

方法一：Flexbox（兼容性好，推荐） #

给包裹两个div的父容器添加以下CSS（请根据你的实际HTML调整父容器选择器）：

/* 假设父容器ID为memContainer */
#memContainer {
  display: flex;
  gap: 16px; /* 可选，设置两个div之间的间距 */
  /* 默认flex-wrap: nowrap，确保元素不会换行堆叠 */
}

#normMem, #delMem {
  flex: 1; /* 让两个元素平分父容器可用宽度，实现同步缩放 */
  min-width: 200px; /* 可选，设置最小宽度，避免缩得太窄导致内容错乱 */
  box-sizing: border-box; /* 确保padding、border不会额外增加元素宽度 */
}

方法二：Grid布局 #

如果更习惯用Grid，也可以这样设置：

#memContainer {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽分配空间 */
  gap: 16px;
}

#normMem, #delMem {
  min-width: 200px;
  box-sizing: border-box;
}

为什么之前的max-width无效？ #

单纯给父容器设置max-width只是限制了容器的最大宽度，但没有指定内部块级元素的排列规则。当窗口宽度小于两个div的总宽度时，块级元素默认会自动换行，导致堆叠。而Flex/Grid通过明确的布局规则，强制两个元素在同一行分配空间，实现同步缩放且不换行。

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