CSS 三欄佈局：左右固寬中間自適應，右欄掉落修復

問題代碼

.left  { width:240px; height:600px; position:absolute; left:0; top:100; }
.main  { height:600px; margin:0 240px; background:#9CF; }
.right { height:600px; width:240px; position:absolute; top:100; right:0; background:#FCC; }

現象：右欄掉到下面，無法與左、中欄同行。

根本原因

position:absolute 元素若未設置 top，會相對最近的定位祖先定位；此處 .right 的 top:100 **缺少單位**，瀏覽器忽略該屬性，導致定位位置異常，右欄跑到文檔流末尾。

修復

.left  { top: 100px; }  /* 添加 px */
.right { top: 100px; }  /* 添加 px */

更穩健的聖杯佈局（推薦）

.container { padding: 0 240px; position: relative; }
.left  { width: 240px; margin-left: -100%; position: relative; left: -240px; float: left; }
.main  { width: 100%; float: left; }
.right { width: 240px; margin-left: -240px; float: left; }

• 無 absolute，無高度塌陷風險。
• 中間優先渲染，SEO 友好。
• 兼容 IE6+。

現代最佳：Flexbox

.container { display: flex; }
.left  { width: 240px; flex-shrink: 0; }
.main  { flex: 1; }
.right { width: 240px; flex-shrink: 0; }

三行代碼解決所有對齊、高度、順序問題，**新項目無理由不用 Flex/Grid**。