网格布局中Div Container左右margin/padding/gap不生效问题求助

DevOps 小满

2026-7-12

网格子容器左右间距不生效的解决方法

问题分析

你的results-container设置了width: 100%，这会强制子容器占满网格列的全部宽度，导致：

子容器的左右margin被挤压，无法正常显示
网格容器的gap被子容器覆盖，看起来没有生效
上下间距正常是因为行方向没有被100%宽度限制，所以margin和gap能正常展示。

修复方案

方案一：移除子容器的100%宽度限制

删掉results-container中的width: 100%，让容器根据内容自适应宽度，同时保留max-width防止容器过宽：

.results-container {
  text-align       : left;
  background-color : var(--container-color);
  color            : var(--text-color);
  border-radius    : 5px;
  padding          : 10px;
  max-width        : 350px; /* 根据需求调整最大宽度 */
  box-shadow       : 0px 0px 10px rgba(0, 0, 0, 0.7);
  display          : flex;
  flex-direction   : column;
  margin           : 10px;
}

方案二：保留宽度但调整计算方式

如果需要子容器占满列空间同时保留间距，添加box-sizing: border-box并调整宽度为calc(100% - 20px)（减去左右margin的总和）：

.results-container {
  text-align       : left;
  background-color : var(--container-color);
  color            : var(--text-color);
  border-radius    : 5px;
  padding          : 10px;
  max-width        : 100%;
  width            : calc(100% - 20px); /* 减去左右各10px的margin */
  box-sizing       : border-box; /* 让padding和border计入宽度 */
  box-shadow       : 0px 0px 10px rgba(0, 0, 0, 0.7);
  display          : flex;
  flex-direction   : column;
  margin           : 10px;
}