如何用 HTML 和 CSS 实现专辑封面式容器垂直堆叠布局

在网页中“将容器拼接在一起”，本质是实现多个区块元素（如标题、标签、图片区域）在页面中按预期顺序、间距和对齐方式组合呈现。虽然提问者提到“只用 HTML”，但纯 HTML 无法控制布局样式（如间距、居中、边框），因此必须配合 CSS 才能精准还原专辑封面这类强视觉结构。

下面提供两种实用方案，从兼容性优先到现代推荐：

✅ 方案一：语义清晰的 div + Flexbox（推荐）

使用语义化 <div> 包裹内容，并通过 Flexbox 实现垂直堆叠与统一控制，更符合现代 Web 开发规范：

<style>
.album-stack {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 块间统一间距 */
  align-items: center; /* 水平居中 */
  padding: 20px;
  font-family: Arial, sans-serif;
}

.album-stack > div {
  background: #fff;
  border: 4px solid #e74c3c;
  padding: 13px 32px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 25px;
  width: fit-content; /* 宽度随文字自适应 */
}
</style>

<div class="album-stack">
  <div>Heaven</div>
  <div>Radiation</div>
  <div>Radio</div>
  <div>Television</div>
</div>

? 优势说明：flex-direction: column 确保垂直排列；gap 精确控制间距；width: fit-content 避免容器撑满整行，保持紧凑感；完全无需表格标签，语义更合理。

⚠️ 方案二：传统 <table>（仅作兼容参考）

原答案使用 <table> 可快速实现效果，但需注意：<table> 本意是展示二维数据表格，用于布局属于过时做法（CSS 诞生前的 hack），已不被现代标准推荐：

PixVerse

PixVerse是一款强大的AI视频生成工具，可以轻松地将多种输入转化为令人惊叹的视频。

下载

立即学习“前端免费学习笔记（深入）”；

<style>
.album-table td {
  border: 4px solid #e74c3c;
  padding: 13px 32px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 25px;
  font-family: Arial, sans-serif;
}
</style>

<table class="album-table">
  <tr><td>Heaven</td></tr>
  <tr><td>Radiation</td></tr>
  <tr><td>Radio</td></tr>
  <tr><td>Television</td></tr>
</table>

⚠️ 注意事项：表格会默认产生额外空白（如 border-collapse: separate），且难以响应式适配；若未来需添加图标、悬停动效或移动端适配，Flexbox 或 Grid 将显著简化开发。

? 总结建议

• ✅ 初学者友好起点：直接复制「方案一」代码即可运行，修改文字和颜色即可复用；
• ? 扩展性提示：后续可为 .album-stack > div 添加 :hover { transform: scale(1.05); } 实现微交互；
• ? 响应式增强：加入 @media (max-width: 600px) { .album-stack > div { font-size: 20px; padding: 10px 24px; } } 适配手机；
• ? 进阶延伸：若需左右分栏（如封面+简介），可升级为 CSS Grid：display: grid; grid-template-columns: 1fr 2fr; gap: 24px;。

掌握这种“容器拼接”的核心，不是记住某段代码，而是理解：HTML 定义结构，CSS 控制呈现——两者协作，才能让创意精准落地。