section内div无法与图片对齐，求响应式布局解决方案

问题分析 #

你当前的section未设置合适的布局规则，div作为块级元素默认占满整行，导致无法和图片实现期望的对齐效果。以下是两种实用的响应式解决方案：

方案1：Flexbox布局（推荐） #

通过Flexbox实现图片与div的并排对齐，同时自动适配移动端换行：

section {
  display: flex;
  flex-wrap: wrap; /* 屏幕较小时自动换行 */
  align-items: center; /* 垂直方向居中对齐 */
  gap: 2rem; /* 图片与div的间距 */
  max-width: 1200px;
  margin: 0 auto; /* 让section在页面中居中 */
  padding: 2rem;
}

section img {
  flex: 1 1 300px; /* 响应式缩放，最小宽度300px */
  max-width: 50%; /* 桌面端最大占比50% */
  height: auto; /* 保持图片比例 */
}

section div {
  flex: 1 1 300px; /* 和图片遵循相同的缩放规则 */
}

方案2：Grid布局 #

用Grid实现更规整的两列布局，移动端自动切换为单列：

section {
  display: grid;
  grid-template-columns: minmax(300px, 1fr); /* 移动端单列 */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* 桌面端适配（屏幕宽度≥768px时生效） */
@media (min-width: 768px) {
  section {
    grid-template-columns: 1fr 1fr; /* 均分两列 */
    align-items: center;
  }
}

section img {
  width: 100%;
  height: auto;
}

效果说明 #

• 桌面端：图片与div并排对齐，各占合理宽度，保持视觉一致
• 移动端：自动切换为垂直排列，避免内容拥挤，适配小屏幕

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