HTML/CSS：窗口缩放时如何让图片旁文本适配显示？

你遇到的这个问题是响应式开发里很常见的——桌面端好好的并排图文，一缩到小屏幕就乱了套，要么文本挤到图片下面，要么还能跑到footer外面去。别担心，咱们用媒体查询就能轻松搞定，让小屏幕下文本乖乖跑到图片上方，排版舒舒服服的。

具体修改步骤： #

首先先调整基础样式，确保页面高度和footer的定位没问题（这也是文本超出footer的关键原因之一）：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh; /* 改成vh，确保页面占满整个视口高度 */
}
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem; /* 这个值要和你的footer高度一致 */
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6rem; /* 明确footer的高度，避免内容被覆盖 */
}

然后针对图文布局做响应式调整：
假设你的图文容器有个类名（比如.image-text-wrap），先给桌面端设置好并排布局，这里用Flex会比浮动更稳定：

.image-text-wrap {
  display: flex;
  align-items: center; /* 桌面端让文本和图片垂直居中对齐 */
  gap: 1.5rem; /* 图文之间留些空隙，不挤在一起 */
  margin-bottom: 2rem; /* 和footer保持距离，避免贴太近 */
}
.image-text-wrap img {
  max-width: 40%; /* 桌面端图片占比，按需调整 */
  height: auto;
}
.image-text-wrap .text-content {
  flex: 1; /* 文本占剩余宽度 */
}

最后添加媒体查询，适配小屏幕：

/* 当屏幕宽度小于768px时触发，这个阈值你可以自己改 */
@media (max-width: 768px) {
  .image-text-wrap {
    flex-direction: column-reverse; /* 把文本放到图片上方 */
    align-items: flex-start; /* 文本左对齐，更符合移动端阅读习惯 */
  }
  .image-text-wrap img {
    max-width: 100%; /* 小屏幕图片占满宽度 */
    margin-bottom: 1rem; /* 图片和下面的文本留空隙 */
  }
}

为啥这么改？ #

• 用min-height: 100vh替代100%，能确保页面高度始终覆盖整个屏幕，配合footer的绝对定位，内容就不会跑到footer外面了。
• Flex布局比浮动更灵活，媒体查询里切换flex-direction就能轻松改变图文顺序，不用折腾清除浮动的问题。
• 小屏幕下图片占满宽度，文本单独一行，阅读体验会好很多。

这样调整之后，不管是桌面端还是缩小窗口到移动端尺寸，排版都能保持整齐啦。

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