如何让图片置于flex纵向布局的3张图片右侧并匹配总高度？

你现在的问题是外层.items容器用了flex-direction: column，所有子元素都会垂直排列，所以右侧图片自然会跑到三张图下面。要实现左右布局且右侧图片高度匹配左侧总高度，得调整结构和CSS：

调整思路 #

外层用横向flex布局（默认flex-direction: row），把左侧三张图片单独放在一个纵向flex子容器里，右侧图片作为同级的flex子项，利用flex的特性让它自动匹配左侧总高度。

修改后的代码 #

CSS代码

.items {
  display: flex;
  width: 100%; /* 可根据需求调整宽度，比如保留原来的60%也可以 */
  gap: 15px; /* 可选，给左右区域加间距 */
}

.left-images {
  display: flex;
  flex-direction: column;
  width: 60%; /* 把原来的宽度分配给左侧图片容器 */
  gap: 10px; /* 可选，左侧图片之间的间距 */
}

.rightimg {
  align-self: stretch; /* 让右侧图片自动撑满外层容器高度，匹配左侧总高度 */
  object-fit: cover; /* 可选，防止图片拉伸变形，按需选cover/contain */
  width: 40%; /* 对应左侧的60%，总和100%，可按需调整 */
}

HTML代码

<div class="items">
  <div class="left-images">
    <img src="rsc/img/test.png" alt="Join the Discord">
    <img src="rsc/img/test.png" alt="Join the Server">
    <img src="rsc/img/test.png" alt="See our Socials">
  </div>
  <img src="rsc/img/test2.png" class="rightimg" alt="右侧图片">
</div>

关键说明 #

• 外层.items用横向flex，让左侧图片容器和右侧图片并列排列
• 左侧.left-images保持纵向flex，实现三张图垂直布局
• align-self: stretch会让右侧图片自动继承外层容器的高度，而外层容器的高度由左侧三张图的总高度决定，完美匹配
• 如果不想用align-self: stretch，给.rightimg加height: 100%也能达到类似效果，但flex原生的对齐方式更可靠

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