在网页开发中，图片与文本的组合布局是常见场景，但在不同屏幕尺寸下，很容易出现图片挤压文本、两者内容重叠的问题。通过Flexbox弹性布局和媒体查询的配合，可以轻松实现适配多终端的流畅布局效果。
基础Flexbox布局实现
首先我们使用Flexbox搭建图片和文本的基础并排结构，Flexbox的display: flex属性可以让容器内的子元素自动按行排列，并且可以根据空间自动收缩扩展。
/* 容器基础样式 */
.container {
display: flex;
/* 子元素对齐方式：垂直居中 */
align-items: center;
/* 子元素间距 */
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* 图片样式 */
.img-box {
/* 固定图片宽度，不跟随容器缩放 */
flex: 0 0 40%;
max-width: 40%;
}
.img-box img {
width: 100%;
height: auto;
border-radius: 8px;
}
/* 文本区域样式 */
.text-box {
/* 文本区域占据剩余空间 */
flex: 1;
line-height: 1.6;
font-size: 16px;
}对应的HTML结构如下，图片和文本作为容器的直接子元素，按照Flexbox规则排列：
<div class="container">
<div class="img-box">
<img src="https://picsum.photos/600/400?random=2" alt="示例图片">
</div>
<div class="text-box">
<h3>布局示例标题</h3>
<p>这里是文本内容区域，当屏幕宽度足够时，图片和文本会并排显示，不会出现重叠问题，Flexbox会自动分配两者的空间占比。</p>
<p>后续可以添加更多文本内容，测试布局的适配效果，观察不同内容量下的排版表现。</p>
</div>
</div>添加媒体查询适配移动端
上述布局在屏幕宽度大于768px时表现正常，但当屏幕宽度小于768px时，并排的图片和文本会显得拥挤，甚至可能出现重叠。这时候需要媒体查询在窄屏下调整布局规则，让两者垂直排列。
/* 屏幕宽度小于768px时的适配规则 */
@media screen and (max-width: 768px) {
.container {
/* 切换为垂直排列 */
flex-direction: column;
gap: 15px;
padding: 15px;
}
.img-box {
/* 窄屏下图片占满容器宽度 */
flex: 0 0 100%;
max-width: 100%;
}
.text-box {
font-size: 15px;
}
}媒体查询的核心作用是针对不同屏幕尺寸设置不同的CSS规则，这里的断点设置为768px，是常见的移动端适配阈值，也可以根据项目需求调整该数值。
常见问题排查
- 如果出现图片溢出容器的情况，检查图片是否设置了
width: 100%和height: auto，避免固定高度导致变形溢出。 - 如果文本和图片仍然重叠，检查容器是否设置了
flex-wrap: nowrap，默认情况下Flexbox子元素不会换行，可添加flex-wrap: wrap允许换行。 - 媒体查询不生效时，检查CSS中媒体查询的代码位置是否在基础样式之后，避免被基础样式覆盖。
完整示例代码
以下是整合了Flexbox和媒体查询的完整可运行代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式图片文本布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.img-box {
flex: 0 0 40%;
max-width: 40%;
}
.img-box img {
width: 100%;
height: auto;
border-radius: 8px;
}
.text-box {
flex: 1;
line-height: 1.6;
font-size: 16px;
}
.text-box h3 {
margin-bottom: 10px;
font-size: 22px;
}
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
gap: 15px;
padding: 15px;
}
.img-box {
flex: 0 0 100%;
max-width: 100%;
}
.text-box {
font-size: 15px;
}
.text-box h3 {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="img-box">
<img src="https://picsum.photos/600/400?random=3" alt="示例图片">
</div>
<div class="text-box">
<h3>自适应布局示例</h3>
<p>该布局通过Flexbox和媒体查询实现，在桌面端图片和文本并排显示，在移动端自动切换为垂直排列，完全避免内容重叠问题。</p>
<p>你可以尝试调整浏览器窗口宽度，观察布局在不同尺寸下的表现，验证响应式效果。</p>
</div>
</div>
</body>
</html>