CSS三面板布局文本对齐异常：分隔线与顶部文本位置问题求助

问题出在右侧文本容器的布局逻辑上，没有让上下文本区域自动填充空间，也没确保左右容器顶部对齐。以下是修改后的代码：

CSS 代码 #

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.container {
  display: grid;
  grid-template-columns: auto 2px auto;
  align-items: start; /* 强制左右容器顶部对齐 */
  min-height: 100vh;
}

.image-container {
  grid-column: 1;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.text-container {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  height: 100%; /* 与左侧图片容器高度保持一致 */
}

.divider {
  width: 100%;
  height: 2px;
  background-color: #333;
}

.top-text,
.bottom-text {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
  flex-grow: 1; /* 自动填充剩余空间，确保分隔线居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 代码（无需修改） #

<div class="container">
  <div class="image-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png" alt="Your Image">
  </div>
  <div class="text-container">
    <div class="top-text">TOP TEXT HERE</div>
    <div class="divider"></div>
    <div class="bottom-text">BOTTOM TEXT HERE</div>
  </div>
</div>

关键改动说明 #

1. 顶部对齐：给.container添加align-items: start，让左侧图片和右侧文本容器的顶部完全对齐，解决top-text初始偏下的问题。
2. 等高匹配：设置.text-container的height: 100%，确保它的高度和左侧图片容器一致，这样分隔线的垂直位置就能精准对应图片的中点。
3. 空间填充：给.top-text和.bottom-text添加flex-grow: 1，让它们自动填充顶部到分隔线、分隔线到底部的所有空间，同时通过内部flex布局让文本在区域内居中。
4. 清除干扰：移除.divider的margin，避免额外间距打乱布局位置。

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