本文讲解如何用现代 css（flexbox/grid 或 bootstrap）替代过时的 html 表格布局，实现三列响应式结构，并确保首列内容严格限制在 450px 最大宽度，同时在移动端自动堆叠，兼顾语义性与可维护性。
本文讲解如何用现代 css（flexbox/grid 或 bootstrap）替代过时的 html 表格布局，实现三列响应式结构，并确保首列内容严格限制在 450px 最大宽度，同时在移动端自动堆叠，兼顾语义性与可维护性。
传统使用
| 的 width、max-width 和 nowrap 在不同浏览器中表现不一致，且无法随视口动态调整列宽或堆叠顺序。您原始代码中虽设置了 max-width: 450px，但嵌套在固定宽度表格内，被 table-layout: auto（默认）和父级 width: 98% 干扰，导致约束失效。 ✅ 推荐方案：采用语义化 + Flexbox（原生轻量）或 Bootstrap（快速开发）：
方案一：纯 CSS Flexbox（零依赖，推荐）
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式三栏布局</title><style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.layout-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
max-width: 1200px;
margin: 0 auto;
}
.cell {
flex: 1 1 0; /* 允许收缩，基础尺寸为0，由内容/约束决定 */
min-width: 0; /* 防止内容溢出 */
}
.cell-main {
max-width: 450px; /* ✅ 严格限制首列最大宽度 */
flex: 0 0 auto; /* 禁止拉伸，仅按内容+max-width 自适应 */
background-color: #007bff;
color: white;
padding: 1rem;
text-align: center;
}
.cell-2, .cell-3 {
flex: 1; /* 剩余空间均分 */
background-color: #f8f9fa;
padding: 1rem;
text-align: center;
}
/* 移动端堆叠 */
@media (max-width: 768px) {
.layout-row {
flex-direction: column;
}
.cell-main, .cell-2, .cell-3 {
flex: none;
width: 100%;
}
}
</style><div class="layout-row">
<div class="cell cell-main">Main content</div>
<div class="cell cell-2">Content 2</div>
<div class="cell cell-3">Content 3</div>
</div>
方案二：Bootstrap 5（如需快速集成） <div class="container mt-4">
<div class="row g-3">
<div class="col-12 col-md-4" style="max-width: 450px;">
<div class="bg-primary text-white p-3 text-center">Main content</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-light p-3 text-center">Content 2</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-light p-3 text-center">Content 3</div>
</div>
</div>
</div>
⚠️ 关键注意事项：
|
