左側固定寬度、右側自適應，是網頁版型裡最高頻的需求之一。以下整理五種 CSS 做法，左側統一設為 200px，逐一說明寫法與實務取捨。

1. 浮動（Float）方法

傳統做法，現在主要用來維護舊專案，但看懂它對理解 CSS 佈局原理有幫助。

1
2
3
4
5
6
7
8
9
10
.container {
  overflow: hidden; /* 清除浮動 */
}
.left {
  float: left;
  width: 200px;
}
.right {
  margin-left: 200px; /* 與左側寬度相同 */
}

相容性最廣，IE6+ 都能用。缺點是必須清除浮動，父容器用 overflow: hidden 是最省事的方式，但如果內容需要溢出顯示（如下拉選單），就得改用 clearfix。

2. 絕對定位（Absolute Positioning）方法

用絕對定位把左側釘死在左上角。

1
2
3
4
5
6
7
8
9
10
11
.container {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
  width: 200px;
}
.right {
  margin-left: 200px;
}

寫法直觀，但左側脫離文件流，.container 的高度由 .right 決定——若左側內容比右側高，左側會溢出容器底部。適合左右高度可控的情境，否則要另外設 min-height。

3. Flexbox 方法

目前最常見的選擇，語意清楚，也容易做垂直對齊。

1
2
3
4
5
6
7
8
9
.container {
  display: flex;
}
.left {
  flex: 0 0 200px; /* 不增長、不縮小、基礎寬度200px */
}
.right {
  flex: 1; /* 佔用所有剩餘空間 */
}

flex: 0 0 200px 讓左側固定不縮放，flex: 1 讓右側吃掉剩餘空間。IE10 以下不支援，現代專案基本沒差。

4. Grid 佈局方法

Grid 的語法最簡潔，一行 grid-template-columns 搞定兩欄，擴展到三欄、四欄也只是多一個值。

1
2
3
4
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

相容性與 Flexbox 相近，IE11 部分支援，其餘現代瀏覽器全綠。

5. 表格顯示（Table Display）方法

用 CSS 模擬 <table> 的行為，不用真的寫 HTML 表格標籤。

1
2
3
4
5
6
7
8
9
10
11
.container {
  display: table;
  width: 100%;
}
.left {
  display: table-cell;
  width: 200px;
}
.right {
  display: table-cell;
}

相容性好（IE8+），垂直對齊靠 vertical-align 就能處理，不需要額外設定。缺點是 display: table 的寬度計算有時不直觀，不適合需要精確控制間距的版型。

選哪個？

新專案直接用 Flexbox 或 Grid——Flexbox 適合單向排列，Grid 語法更簡潔，多欄擴展方便。需要相容 IE8–9 的舊專案用 Float 或 Table Display。絕對定位方案因為高度脫離文件流，通常只在特定元件（如固定側邊攔）才用，不適合作為通用版型方案。