如何用CSS实现带标题的16:9组合布局：左1右2堆叠

核心问题在于直接给卡片设置aspect-ratio时，标题高度会被计入整体高度，导致图片实际比例偏离16:9。用padding hack结合固定标题高度可以完美解决这个问题，让图片始终保持16:9，同时标题维持单行溢出隐藏效果。

实现思路 #

1. 图片与标题分离：图片单独放在容器内，通过padding hack维持16:9比例
2. 标题单独设置单行溢出样式，固定高度避免干扰布局
3. 用Grid+Flex实现左右分栏，右侧卡片堆叠排列

完整代码示例 #

HTML结构 #

<div class="layout-container">
  <div class="left-card">
    <div class="image-wrapper">
      <img src="your-image-url.jpg" alt="左侧图片">
    </div>
    <h3 class="card-title">左侧超长标题示例内容超长标题示例内容</h3>
  </div>
  <div class="right-column">
    <div class="card">
      <div class="image-wrapper">
        <img src="your-image-url-1.jpg" alt="右侧图片1">
      </div>
      <h3 class="card-title">右侧卡片1标题超长标题测试超长标题测试</h3>
    </div>
    <div class="card">
      <div class="image-wrapper">
        <img src="your-image-url-2.jpg" alt="右侧图片2">
      </div>
      <h3 class="card-title">右侧卡片2标题超长标题示例超长标题示例</h3>
    </div>
  </div>
</div>

CSS样式 #

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

.layout-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 右侧卡片堆叠布局 */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 图片容器：padding hack维持16:9比例 */
.image-wrapper {
  position: relative;
  width: 100%;
  /* 16:9比例计算：9/16 = 56.25% */
  padding-bottom: 56.25%;
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片适配容器，拉伸/裁剪不变形 */
}

/* 单行标题样式 */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.8rem;
  line-height: 1.4;
  height: 1.4rem; /* 固定高度，避免布局晃动 */
  font-size: 1rem;
}

/* 响应式适配：小屏幕切换为单列 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr;
  }
}

关键细节说明 #

• padding hack原理：padding-bottom: 56.25%的百分比基于容器宽度计算，无论容器宽度如何变化，图片容器高度始终是宽度的56.25%，严格维持16:9比例
• 标题处理：固定高度+单行溢出样式，既保证标题不换行，也不会因标题长度差异破坏整体布局
• 响应式适配：通过媒体查询在小屏幕下自动切换为单列布局，保证移动端体验

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