如何实现响应式布局中图片列与文本列高度始终相等？

明确说：不需要修改文本列，也完全不需要用JavaScript，纯CSS就能搞定，下面给你两种靠谱的实现方式：

方案一：CSS Grid 主容器 + 图片列内部 Flex 布局 #

这是最省心的方式，Grid天生支持等高列：

1. 给两列的父容器设置Grid布局：

.events-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等分，也可自定义百分比如40% 60% */
  gap: 20px; /* 可选，列之间的间距 */
}

这样不管文本列因屏幕缩小而变高，图片列都会自动匹配其高度。

2. 处理图片列内部的4个div，让它们填满整个列的高度：
   给图片列容器设置垂直方向的Flex布局，让子元素自动分配高度：

.image-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 图片之间的间距 */
}

.image-gallery-column > div {
  flex: 1; /* 每个图片div平分可用高度 */
  background-size: cover; /* 确保图片铺满容器且不变形 */
  background-position: center; /* 图片核心区域居中显示 */
}

方案二：Flex 主容器 + 图片列内部 Grid 布局 #

如果习惯用Flex，也能实现相同效果：

1. 父容器用Flex，强制列等高：

.events-container {
  display: flex;
  gap: 20px;
}

.events-column, .image-gallery-column {
  flex: 1; /* 两列均分宽度 */
}

Flex默认的align-items: stretch属性会让两列高度自动匹配，无需额外设置。

2. 图片列内部用Grid让4个div填满高度：

.image-gallery-column {
  display: grid;
  grid-template-rows: repeat(4, 1fr); /* 4行均分高度 */
  gap: 10px;
}

.image-gallery-column > div {
  background-size: cover;
  background-position: center;
}

关键注意事项 #

• 不要给任何一列设置固定高度（比如height: 500px），否则会破坏响应式等高逻辑
• 若要适配小屏幕，可通过媒体查询调整布局，比如改成单列：

@media (max-width: 768px) {
  .events-container {
    grid-template-columns: 1fr; /* 小屏幕下单列显示 */
  }
}

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