如何用CSS在不同屏幕宽度下将图片与文本块对齐？

需求回顾 #

宽屏时文本块居中，两侧各放置一张图片；窄屏时文本块在上，两张图片并排显示在下方。

实现代码 #

HTML结构

<div class="responsive-layout">
  <div class="text-content">
    这里是你需要展示的中间文本块内容，可根据实际需求替换为任意文字。
  </div>
  <img src="你的左侧图片地址" alt="左侧配图" class="img-left">
  <img src="你的右侧图片地址" alt="右侧配图" class="img-right">
</div>

CSS样式

/* 基础宽屏布局 */
.responsive-layout {
  display: grid;
  /* 三列布局：左右图片固定200px宽度，文本占中间剩余空间 */
  grid-template-columns: 200px 1fr 200px;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.text-content {
  grid-column: 2 / 3;
  grid-row: 1;
}

.img-left, .img-right {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.img-left {
  grid-column: 1 / 2;
  grid-row: 1;
}

.img-right {
  grid-column: 3 / 4;
  grid-row: 1;
}

/* 窄屏适配（屏幕宽度≤768px时触发） */
@media (max-width: 768px) {
  .responsive-layout {
    /* 切换为两行布局：第一行文本占满两列，第二行两张图片各占一列 */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .text-content {
    grid-column: 1 / 3;
    grid-row: 1;
    margin-bottom: 15px;
  }

  .img-left {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .img-right {
    grid-column: 2 / 3;
    grid-row: 2;
  }
}

关键说明 #

• 用CSS Grid布局精准控制元素行列位置，比Flex布局更适配这种需要切换行列结构的场景。
• 通过media query触发窄屏布局，调整网格模板后重新分配各元素的行列范围，实现图片并排效果。
• 可根据实际需求调整图片宽度、间距、断点宽度等参数。

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