页面缩小时文本布局异常：文本溢出且容器无法适配

核心思路 #

采用弹性盒（Flexbox）或网格（Grid）实现响应式布局，让文本与图片在页面缩放时自动适配空间，避免文本无意义向下收缩、占用过多垂直空间，同时保证文本区域与图片尺寸匹配。

具体实现方案 #

方案1：Flexbox 布局（推荐） #

假设你的HTML结构为「图片+文本容器」，调整CSS如下：

<div class="content-container">
  <img src="你的图片路径" alt="图片描述" class="responsive-img">
  <div class="text-content">
    <!-- 你的文本内容 -->
  </div>
</div>

/* 基础容器设置 */
.content-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1rem; /* 图片与文本间的间距 */
  align-items: flex-start; /* 顶部对齐 */
  max-width: 1200px; /* 限制最大宽度，避免内容过宽 */
  margin: 0 auto; /* 容器居中 */
}

/* 图片自适应 */
.responsive-img {
  max-width: 100%;
  height: auto; /* 保持图片原始比例 */
  flex: 0 0 auto; /* 图片不被压缩 */
}

/* 文本容器自适应 */
.text-content {
  flex: 1; /* 占据容器剩余空间，页面缩小时自动调整宽度 */
  min-width: 280px; /* 设置最小宽度，避免极端缩小时文本可读性差 */
}

/* 小屏幕优化（可选） */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* 小屏幕下图片与文本垂直排列 */
  }
}

方案2：Grid 布局 #

如果需要更精细的列宽控制，可使用Grid布局：

.content-container {
  display: grid;
  grid-template-columns: auto 1fr; /* 图片宽度自适应，文本占据剩余空间 */
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .content-container {
    grid-template-columns: 1fr; /* 小屏幕下切换为单列布局 */
  }
}

关键注意点 #

• 不要给文本容器设置固定宽度，改用flex:1或Grid的弹性宽度规则实现自适应
• 图片必须设置max-width:100%和height:auto，保证缩放时比例不变
• 用min-width给文本容器设置宽度下限，避免极端缩小时文本过窄
• 避免使用position:absolute这类脱离文档流的属性，会破坏布局的自适应逻辑

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