如何用纯HTML和CSS实现可变高度元素的Deck结构布局

直接上可运行的解决方案，分两种布局方式供选择：

方案一：CSS Grid布局（推荐） #

Grid布局天生支持列高度独立，是实现这类需求最简洁的方式：

<div class="layout-container">
  <div class="rt-section">
    <h2>RT 区域</h2>
    <p>这里是可变长度的文本内容...（可添加更多内容测试高度变化）</p>
    <p>额外文本行，模拟左侧高度动态变化的场景。</p>
  </div>
  <div class="ad-section">
    <h2>AD 区域</h2>
    <p>广告内容，高度可自由超过左侧区域</p>
    <p>广告内容行1</p>
    <p>广告内容行2</p>
    <p>广告内容行3</p>
    <p>广告内容行4</p>
    <p>广告内容行5</p>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 左侧占2份宽度，右侧占1份，可按需调整比例 */
  gap: 20px; /* 两列间距 */
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.rt-section, .ad-section {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 移动端适配：切换为单列布局 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}

核心原理 #

Grid布局中，每一列的高度完全由自身内容撑开，不会被其他列的高度限制，天然满足“右侧AD列高度可超过左侧RT列”的需求。

方案二：Flex布局（备选） #

如果之前尝试Flex失败，问题出在默认的align-items: stretch属性——它会强制所有子元素高度与容器内最高元素一致。只需修改该属性即可：

.layout-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start; /* 关键：让子元素高度由自身内容决定 */
}

.rt-section {
  flex: 2; /* 左侧宽度占比 */
}

.ad-section {
  flex: 1; /* 右侧宽度占比 */
}

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
}

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