Flexbox图片对齐问题：实现第一张图右下角接第二张图左上角且适配各浏览器尺寸

• 先清除浏览器默认的边距、图片默认的行内块间隙，避免未知间距影响对齐效果
• 上下两行.flexrow取消外边距，实现行与行无缝衔接
• 第一张图片所在的左侧列设置内容右下对齐，让图片的右下角刚好贴合列的右下角
• 第二张图片所在的右侧列设置内容左上对齐，让图片的左上角刚好贴合列的左上角
• 添加响应式规则，小屏设备下自动切换为单列布局，适配移动端浏览

完整修改代码 #

CSS #

/* 先重置默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.flexbox {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: #F8F5F0;
}
.flexrow {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  /* 取消行间距 */
  margin: 0;
}
.flexcol {
  max-width: 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  /* 文字区域内边距可按需调整 */
  padding: 16px;
}
/* 图片基础样式，避免变形和默认间隙 */
.flexcol img {
  width: 100%;
  height: auto;
  display: block;
}
/* 第一张图片所在列：内容右下对齐 */
.img-first {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0;
}
/* 第二张图片所在列：内容左上对齐 */
.img-second {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .flexcol {
    max-width: 100%;
    width: 100%;
  }
  /* 移动端可按需调整图片边距 */
  .img-first, .img-second {
    padding: 16px;
  }
}

HTML #

仅需给两张图片所在的列增加自定义类即可，其余结构保持不变：

<div class="flexbox">
  <div class="flexrow">
    <div class="flexcol img-first">
      <img src="https://i.imgur.com/9sOCPL1.jpg" alt="第一张图">
    </div>
    <div class="flexcol">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
  <div class="flexrow">
    <div class="flexcol">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div class="flexcol img-second"><img src="https://i.imgur.com/G55u0Uq.jpg" alt="第二张图">
    </div>
  </div>
</div>

该方案在桌面端双列布局下，可保证第一张图右下角和第二张图左上角完全衔接，图片宽高随视口尺寸等比缩放不会出现错位，移动端自动切换为单列布局，适配不同设备浏览。

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