使用flexbox或Grid结合媒体查询实现响应式图文排列：小屏垂直堆叠，大屏水平并排；图片设max-width:100%和height:auto，用Object-fit控制缩放，通过order调整显示顺序，确保内容在不同设备上自然协调展示。

响应式布局中文字与图片的排列，关键在于让内容在不同屏幕尺寸下都能自然展示。核心方法是使用css的Flexbox或grid布局，并结合媒体查询动态调整排列方式。

使用Flexbox实现图文响应式排列

Flexbox非常适合处理图文混排的响应式需求。通过设置容器为弹性布局，可以轻松控制图片和文字在不同屏幕下的排列方向。

示例代码：

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
    align-items: center;
  }
}

说明：在小屏幕上，图片在上、文字在下垂直排列；当屏幕宽度达到768px以上时，改为水平排列。

立即学习“前端免费学习笔记（深入）”；

使用Grid布局实现更灵活的图文结构

CSS Grid适合需要更复杂对齐或跨列设计的场景。

醒文

文字排版美化生图工具

22

查看详情

示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 2fr;
  }
}

这样可以在大屏上让图片占1份宽度，文字占2份，形成图文并排效果。

响应式文字与图片对齐技巧

为了让图文在不同设备上看起来协调，注意以下几点：

• 图片始终设置 max-width: 100% 和 height: auto，防止溢出容器
• 使用 object-fit 控制图片在容器内的缩放方式，如 cover 或 contain
• 在移动端优先考虑垂直堆叠，避免文字过窄影响阅读
• 利用 order 属性在不同断点调整图文顺序（比如在手机上先显示文字）

基本上就这些。合理运用Flexbox或Grid配合媒体查询，就能实现自然流畅的响应式图文排列。不复杂但容易忽略细节。

以上就是