嘿，我来帮你搞定这个布局问题！你遇到的文本覆盖图片的情况，大多是因为原来的布局没处理好空间不足时的换行逻辑，或者用了固定宽度导致元素挤在一起。下面给你两种简单可靠的方案，用现在主流的Flexbox和CSS Grid来实现响应式效果：

方案一：Flexbox（灵活易上手） #

这是最常用的方案，通过Flex的弹性布局和自动换行特性，轻松实现需求。

HTML结构 #

<div class="content-container">
  <div class="image-wrapper">
    <img src="你的图片地址" alt="图片描述">
  </div>
  <div class="text-wrapper">
    <h2>标题文本</h2>
    <p>这里是你的内容文本，可以是多行的段落，或者其他元素。</p>
  </div>
</div>

CSS样式 #

/* 基础容器样式 */
.content-container {
  display: flex;
  gap: 2rem; /* 控制图片和文本之间的间距，可根据需求调整 */
  flex-wrap: wrap; /* 关键：空间不足时自动换行 */
  max-width: 1200px; /* 限制容器最大宽度，避免桌面端太宽 */
  margin: 0 auto; /* 容器居中 */
  padding: 1rem;
}

/* 图片容器 */
.image-wrapper {
  flex: 1 1 300px; /* 1:1的缩放比例，最小宽度300px */
}

.image-wrapper img {
  width: 100%;
  height: auto; /* 保持图片比例，避免拉伸变形 */
  display: block; /* 去掉图片默认的底部间隙 */
}

/* 文本容器 */
.text-wrapper {
  flex: 1 1 300px; /* 和图片容器一样的弹性设置，保证两栏平分空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 让文本垂直居中，可选 */
}

/* 移动端断点：屏幕宽度小于768px时改为上下排列 */
@media (max-width: 768px) {
  .content-container {
    flex-direction: column; /* 强制改为垂直方向排列 */
  }
}

方案二：CSS Grid（更简洁的布局方式） #

如果你喜欢更简洁的代码，CSS Grid的auto-fit + minmax组合可以不用写媒体查询，自动适配屏幕宽度：

CSS样式（HTML结构和上面一致） #

.content-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 可选：文本垂直居中 */
}

关键说明 #

• flex: 1 1 300px 和 minmax(300px, 1fr) 的作用是：当容器宽度足够时，两栏平分空间；当容器宽度小于两个元素最小宽度之和（这里是600px）时，自动换行变成单列。
• 图片设置width: 100%是为了让图片自适应容器宽度，避免溢出。
• gap属性用来控制元素之间的间距，比用margin更方便，不会出现外边距重叠的问题。

这样调整后，桌面端图片和文本会并排显示，当窗口缩小到移动端尺寸时，图片会自动跑到上方，文本紧随其下，再也不会出现覆盖的情况啦！

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