CSS 三列布局：中間固定寬度、兩側自適應的現代實現方案

需求分析

三個同高 div，中間寬度固定（如 960px），左右兩側平分剩餘空間，隨視口變化自適應。

方案對比

方案一：Flexbox（推薦，現代瀏覽器首選）

.container {
    display: flex;
    height: 300px; /* 或 100vh */
}
.left, .right {
    flex: 1;           /* 平分剩餘空間 */
    background: #eee;
}
.center {
    width: 960px;      /* 固定寬度 */
    flex-shrink: 0;    /* 防止被壓縮 */
    background: #fff;
}

方案二：Grid 布局（語義更清晰）

.container {
    display: grid;
    grid-template-columns: 1fr 960px 1fr; /* 左中右 */
    height: 300px;
}

方案三：Float + 負 Margin（兼容 IE9+）

.container { overflow: hidden; height: 300px; }
.center { width: 960px; margin: 0 auto; background: #fff; }
.left, .right { width: 50%; float: left; height: 100%; }
.left { margin-left: -960px; background: #eee; } /* 複雜，不推薦新項目使用 */

方案四：JS 動態計算（舊項目兜底）

function resize() {
    var w = document.documentElement.clientWidth || document.body.clientWidth;
    var side = (w - 960) / 2;
    document.querySelector('.left').style.width = side + 'px';
    document.querySelector('.right').style.width = side + 'px';
}
window.onresize = resize;
resize();

缺點：需監聽 resize、重排重繪、JS 執行延遲導致閃爍，維護成本高。

最佳實踐建議

進階技巧：等高列與內容溢出處理

• Flex/Grid 默認 align-items: stretch 實現等高
• 中間列內容可能超寬：添加 overflow-x: auto 內部滾動，避免撐破佈局
• 左右側內容過多：同樣加 overflow: auto 或 hidden