css布局响应式文字与图片排列-css教程-PHP中文网

css布局响应式文字与图片排列

P粉602998670

发布： 2025-10-23 21:33:01

原创

844人浏览过

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

css布局响应式文字与图片排列

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

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

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

示例代码：

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

img {
  max-width: 100%;
  height: auto;
}

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

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

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

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

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

醒文

文字排版美化生图工具

查看详情

示例：

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

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

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