在响应式布局开发过程中，很多时候会遇到图片和文本在小屏幕或者大屏幕下出现重叠的情况，这会让页面内容变得混乱，用户无法正常阅读信息。要解决这个问题，我们可以结合Flexbox的弹性布局能力和媒体查询的屏幕尺寸适配规则，从布局容器设置、元素排列规则、断点适配三个层面入手调整。
问题产生的原因分析
图片与文本重叠通常有两个核心原因。一是父容器没有设置合适的弹性布局规则，元素尺寸超出容器范围时没有自动调整。二是没有针对不同屏幕尺寸设置适配规则，固定宽度的元素在屏幕变窄时挤压其他元素的空间，最终导致重叠。
基础Flexbox布局配置
首先我们需要给包裹图片和文本的父容器开启Flexbox布局，设置基础的排列和换行规则，让元素默认情况下可以弹性调整位置。
/* 父容器基础样式 */
.media-container {
display: flex;
/* 宽度不足时自动换行 */
flex-wrap: wrap;
/* 元素垂直方向居中对齐 */
align-items: center;
/* 元素之间的间距 */
gap: 20px;
padding: 20px;
border: 1px solid #e5e5e5;
}
/* 图片容器样式 */
.img-wrapper {
/* 默认占40%宽度 */
flex: 0 0 40%;
max-width: 40%;
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
/* 文本容器样式 */
.text-wrapper {
/* 剩余空间全部分配给文本 */
flex: 1;
min-width: 300px;
}以上配置可以让图片和文本在屏幕宽度足够时横向排列，当屏幕宽度不足以同时放下两个元素时，会自动换行，从根源上减少重叠的可能性。
媒体查询适配小屏幕
当屏幕宽度进一步缩小到手机尺寸时，即使换行也可能出现图片和文本挤压导致的重叠，这时候需要添加媒体查询规则调整元素的占比。
/* 屏幕宽度小于768px时的适配规则 */
@media screen and (max-width: 768px) {
.media-container {
/* 垂直排列元素 */
flex-direction: column;
gap: 15px;
}
.img-wrapper {
/* 小屏幕下图片占满容器宽度 */
flex: 0 0 100%;
max-width: 100%;
}
.text-wrapper {
/* 文本也占满容器宽度 */
flex: 0 0 100%;
min-width: auto;
}
}通过这段媒体查询规则，当屏幕宽度小于768px时，图片和文本会切换为纵向排列，两者不会互相挤压空间，彻底避免重叠问题。
完整示例代码
以下是包含HTML结构和全部样式的完整示例，可直接复制到本地运行测试效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox响应式布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.media-container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
padding: 20px;
border: 1px solid #e5e5e5;
max-width: 1200px;
margin: 50px auto;
}
.img-wrapper {
flex: 0 0 40%;
max-width: 40%;
}
.img-wrapper img {
width: 100%;
height: auto;
display: block;
}
.text-wrapper {
flex: 1;
min-width: 300px;
}
.text-wrapper h3 {
font-size: 24px;
margin-bottom: 10px;
}
.text-wrapper p {
font-size: 16px;
line-height: 1.6;
color: #333;
}
@media screen and (max-width: 768px) {
.media-container {
flex-direction: column;
gap: 15px;
margin: 20px auto;
}
.img-wrapper {
flex: 0 0 100%;
max-width: 100%;
}
.text-wrapper {
flex: 0 0 100%;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="media-container">
<div class="img-wrapper">
<img src="https://picsum.photos/600/400?random=2" alt="示例图片">
</div>
<div class="text-wrapper">
<h3>响应式布局示例标题</h3>
<p>这是一段示例文本，用来展示图片和文本在响应式布局下的排布效果。当屏幕尺寸变化时，两者的位置和占比会自动调整，不会出现重叠的情况，保证内容的可读性。</p>
</div>
</div>
</body>
</html>调试注意事项
在实际开发中，还可以配合浏览器的开发者工具模拟不同屏幕尺寸，检查元素的flex属性是否符合预期。如果仍然出现重叠，可以检查是否有元素设置了固定宽度没有适配，或者gap属性的值是否过大导致元素超出容器。另外注意图片需要设置height: auto保证比例正常，避免因图片变形挤压文本空间。