Flex布局下图片边角无法完全贴合的问题求助

你的问题核心是flex布局的垂直对齐逻辑和元素高度不统一导致两张图片边角无法对齐。当前代码里.block设置了align-items: center，会让文本块和图片块垂直居中对齐，但文本块高度由内部内容（含padding）决定，图片是固定600px高度，这就导致上下两个.block的整体高度不一致，图片自然无法边角贴合。

修复步骤： #

• 把.block的align-items: center替换为align-items: stretch，让文本、图片块自动撑满父容器高度
• 给.block-info添加display: flex和flex-direction: column，确保内部文本容器能填充整个块的高度
• 可选：若需要文本内容垂直居中，在.block-info-content里加margin: auto即可

修改后的完整代码： #

<body>
  <div>        
    <div class="block reverse">
      <div class="block-info left">
        <div class="block-info-content">
          <div class="block-title">
            <h2>Title 1</h2>
          </div>
          <div class="block-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
          </div>
        </div>
      </div>
      <div class="block-photo">
        <div class="block-img first">
          <img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
        </div>
      </div>
    </div>
    <div class="block">
      <div class="block-photo">
        <div class="block-img">
          <img src="https://images.unsplash.com/photo-1607028227034-f0378aa1bd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80">
        </div>
      </div>
      <div class="block-info right">
        <div class="block-info-content">
          <div class="block-title">
            <h2>Title 2</h2>
          </div>
          <div class="block-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis tempus nibh. Sed eget lacinia lorem. Integer imperdiet sodales bibendum. Donec fermentum viverra orci, at scelerisque erat commodo sit amet. Nullam et blandit massa. Quisque gravida consectetur tristique. Sed eget tempor ante. Aliquam aliquet dolor porta suscipit elementum. Ut vel fringilla lacus.</p>
        </div>
        </div>
      </div>
    </div>
  </div>
</body>

<style>
body {
  margin: 0 20em;
}

h2, h3, h1, h4, p {
  margin: 10px 0;
  padding: 0;
}

.block {
  line-height: 24px;
  display: flex;
  flex-direction: row;
  align-items: stretch; /* 替换原center属性 */
  text-align: left;
}

.block-info, .block-photo {
  width: 50%;
}

.block-info {
  display: flex; /* 新增：让内部容器填充高度 */
  flex-direction: column;
}

.block-img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
  
.block-info-content {
  text-align: left;
  padding: 2em;
  margin: auto; /* 可选：让文本垂直居中 */
}

.block-text {
  padding-top: 2em;
}
</style>

效果说明： #

修改后，上下两个.block的高度会统一匹配图片的600px高度，文本块自动撑满对应区域，两张图片的边角就能完全贴合形成规整网格。如果不需要文本垂直居中，去掉.block-info-content的margin: auto即可。

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