如何用HTML和CSS实现左文右图的等宽等高两栏布局

你遇到的核心问题是原方案中flex:1会让左右栏平分容器可用宽度，而非让右侧匹配左侧文本的自然尺寸。以下是两种可行的实现方案：

方案一：CSS Grid（推荐） #

Grid天然支持内容驱动的等宽列布局，代码简洁且效果稳定：

.container {
  display: grid;
  /* 两列宽度由内容决定，且自动保持等宽 */
  grid-template-columns: auto auto;
  /* 整体居中 */
  justify-content: center;
  /* 可选：调整两栏间距 */
  /* gap: 1rem; */
}

.left-div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-div {
  /* 确保高度与左侧完全对齐 */
  height: 100%;
}

.right-div img {
  width: 100%;
  height: 100%;
  /* 保持图片比例并填充容器，超出部分裁剪 */
  object-fit: cover;
}

<div class="container">
    <div class="left-div">
        <p>Some filler text that will cause it to have a width and height that the right div needs to meet</p>
    </div>

    <div class="right-div">
        <img src="https://picsum.photos/id/522/536/354" />
    </div>
</div>

原理：grid-template-columns: auto auto会让两列取内容的最大宽度（即左侧文本的自然宽度），并强制两列等宽；Grid默认会让同一行的单元格高度对齐，因此右侧会自动匹配左侧的高度。

方案二：Flexbox调整 #

如果坚持使用Flexbox，可以通过让容器宽度适应左侧内容，再强制右侧与左侧等宽：

.container {
  /* 让容器宽度由内部内容决定 */
  display: inline-flex;
  align-items: stretch;
  /* 整体居中 */
  margin: 0 auto;
}

.left-div {
  /* 禁止左侧缩放，宽度由文本决定 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-div {
  /* 强制右侧宽度与左侧完全一致 */
  width: 100%;
}

.right-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理：inline-flex让容器宽度自适应左侧文本的宽度，右侧通过width:100%继承容器的宽度（即左侧的宽度），align-items:stretch保证高度一致。

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