如何实现图片靠左、右侧Div同高且响应式换行布局？

安全阿岳

2026-7-13

解决方案

你的问题根源在于用了绝对定位，让图片容器脱离了文档流——父容器#imageSection没法感知它的高度，所以和右侧文本区高度不一致；另外固定左内边距的方式也没法实现浏览器缩小时自动换行。下面给你两种简单可靠的实现方式：

方案一：Flexbox布局（推荐）

Flexbox是最适合这种一维布局的方案，轻松实现等高+响应式换行：

修改后的CSS

#imageSection {
  width: 100%;
  display: flex; /* 启用Flex布局 */
  flex-wrap: wrap; /* 宽度不足时自动换行 */
  gap: 10%; /* 图片和文本区之间的间距，可自定义 */
}

#myImageDiv {
  flex: 0 0 45%; /* 固定占比45%，不拉伸不收缩 */
  min-width: 300px; /* 最小宽度，低于这个值就换行 */
}

#myImage {
  width: 100%;
  height: 100%; /* 让图片填满容器高度，保持等高 */
  object-fit: cover; /* 图片比例不变，填满容器，避免拉伸变形 */
}

#myText {
  flex: 1; /* 占据剩余空间，也可以用flex: 0 0 45%和图片保持同宽 */
  min-width: 300px; /* 和图片一致的最小换行宽度 */
  display: flex;
  flex-direction: column; /* 让文本内容垂直排列 */
}

说明

display: flex让子元素变成Flex项，默认会自动等高（align-items: stretch是默认值）
flex-wrap: wrap确保浏览器宽度小于两个子元素宽度之和时自动换行
min-width控制换行的临界点，可根据需求调整数值
object-fit: cover保证图片不会被拉伸变形，同时填满容器高度

方案二：Grid布局

Grid适合二维布局，实现起来同样简单：

修改后的CSS

#imageSection {
  width: 100%;
  display: grid; /* 启用Grid布局 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自动适配列数，最小列宽300px */
  gap: 10%; /* 列间距 */
}

#myImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}