响应式Grid布局故障：800px以下元素堆叠问题排查

肯定需要在@media规则中添加额外样式来修复窄屏堆叠问题，以下是针对你的场景给出的具体修改方案：

核心思路 #

宽屏（≥800px）下的横向布局在窄屏（＜800px）会因空间不足导致元素自动堆叠，需要通过媒体查询强制改为垂直流式布局，同时保证图片和容器自适应不溢出。

具体代码修改 #

假设原布局使用Flexbox（推荐方案） #

添加以下媒体查询规则：

@media (max-width: 799px) {
  /* 把横向排列改为垂直排列 */
  .content_display {
    flex-direction: column;
    gap: 1.5rem; /* 控制元素间垂直间距 */
    padding: 0 1rem; /* 避免内容贴边 */
  }

  /* 让三个盒子占满容器宽度 */
  .image_box, .text_box, .info_box {
    width: 100%;
  }

  /* 处理图片自适应，保持比例且不超过原尺寸 */
  .image_box img {
    width: 100%;
    height: auto;
    max-width: 340px; /* 匹配图片原宽度 */
    display: block;
    margin: 0 auto; /* 图片居中显示 */
  }
}

若原布局使用Float布局 #

添加以下媒体查询规则：

@media (max-width: 799px) {
  .content_display {
    overflow: hidden; /* 清除容器内浮动 */
    padding: 0 1rem;
  }

  /* 取消浮动，改为垂直块级排列 */
  .image_box, .text_box, .info_box {
    width: 100%;
    float: none;
    margin-bottom: 1.5rem; /* 控制垂直间距 */
  }

  /* 图片自适应处理同Flex方案 */
  .image_box img {
    width: 100%;
    height: auto;
    max-width: 340px;
    display: block;
    margin: 0 auto;
  }
}

关键细节说明 #

• height: auto 保证图片缩放时保持原比例，避免拉伸变形
• max-width: 340px 限制图片最大宽度不超过原尺寸，防止在大屏手机上过度放大模糊
• 容器添加内边距和元素间距，提升窄屏阅读体验

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