Markdown 分欄完全指南 - 多欄佈局方法與程式碼範例

每次想在 Markdown 裡並排放兩段內容，就會發現 Markdown 根本沒有分欄語法。沒有 :::columns，沒有 {.split}，什麼都沒有。

這其實說得通。Markdown 的設計初衷是「易讀易寫的純文字格式」[^1]，而多欄佈局本質上是排版問題，不是純文字該操心的事。但這不代表你完全沒辦法——這篇文章會把你能在 Markdown 裡用到的所有分欄方法講清楚，包括哪些場景能用、哪些平台不支援、以及每種方法的具體程式碼。

為什麼 Markdown 沒有原生的分欄語法？

先說結論：CommonMark 規範 [^1] 和 GitHub Flavored Markdown（GFM）都沒有定義任何分欄或多欄語法。這不是遺漏，而是刻意的設計選擇。

Markdown 的核心哲學是「原始碼本身就應該是可讀的」。多欄佈局是視覺層面的東西——一個純文字檔案沒辦法表達「左邊放 A、右邊放 B」這種空間關係。你在純文字裡看到一左一右兩段文字，不借助渲染器根本看不出它們是並排的。

所以如果你需要在 Markdown 裡做分欄，所有方法本質上都是在 Markdown 裡嵌入 HTML 和 CSS。理解了這一點，後面的內容就不會讓你意外了。

方法一：HTML + CSS Flexbox（最常用）

這是目前最通用、最靈活的分欄方法。原理很簡單：用 HTML 的 <div> 標籤搭配 CSS Flexbox 佈局。

基本雙欄佈局

<div style="display: flex; gap: 20px;">
  <div style="flex: 1;">

### 左欄內容

這裡是左欄的 Markdown 內容。

  </div>
  <div style="flex: 1;">

### 右欄內容

這裡是右欄的 Markdown 內容。

  </div>
</div>

幾個關鍵點：

  • display: flex 開啟彈性佈局
  • flex: 1 讓兩欄等寬，改成 flex: 2 就能讓某一欄更寬
  • gap: 20px 控制欄間距
  • 每個 <div> 內部可以正常寫 Markdown——前提是你的渲染器支援 HTML 區塊內的 Markdown 解析

有一次我給專案寫 README，興沖沖寫了兩個 <div style="flex:1"> 想把介面說明和範例程式碼並排顯示，推到 GitHub 上一看——兩段內容老老實實上下排列，style 屬性被直接刪掉了。後來才搞清楚 GitHub 出於安全考慮會過濾所有自訂樣式 [^3]。

三欄佈局

把結構擴展一下就行：

<div style="display: flex; gap: 16px;">
  <div style="flex: 1;">

#### 第一欄

內容 A

  </div>
  <div style="flex: 1;">

#### 第二欄

內容 B

  </div>
  <div style="flex: 1;">

#### 第三欄

內容 C

  </div>
</div>

不等寬分欄

如果需要側邊欄效果（比如 3:7 比例）：

<div style="display: flex; gap: 20px;">
  <div style="flex: 3;">

### 主內容區

這裡是主要內容。

  </div>
  <div style="flex: 7;">

### 側邊欄

這裡是輔助資訊。

  </div>
</div>

Flexbox 的優勢在於它足夠靈活——改一個數字就能調整欄寬比例，加一個 <div> 就能增加欄數。缺點是程式碼比較冗長，而且不是所有 Markdown 渲染器都支援在 HTML 標籤內解析 Markdown 語法。這個問題在後面「平台相容性」部分會詳細說。

方法二：HTML + CSS Grid

CSS Grid 是另一種現代佈局方案。和 Flexbox 的區別在於 Grid 更擅長二維佈局——行和列同時控制。對於簡單的分欄場景，Grid 和 Flexbox 效果差不多，但 Grid 寫法可以更簡潔：

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">

### 左欄

左欄內容。

### 右欄

右欄內容。

</div>

三欄的寫法：

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;">

#### 欄一
內容 A

#### 欄二
內容 B

#### 欄三
內容 C

</div>

Grid 的好處是 grid-template-columns 這一行就能定義欄數和比例，比如 2fr 1fr 表示左欄佔 2/3、右欄佔 1/3。相比 Flexbox 需要在每個子元素上寫 flex 屬性，Grid 把佈局邏輯集中在一個地方，程式碼更乾淨。

不過和 Flexbox 一樣，Grid 的實際效果完全取決於你的渲染環境是否支援。

方法三：CSS column-count（適合純文字多欄）

如果你的分欄需求是「把一段長文字自動分成多欄顯示」（類似報紙排版），CSS 的 column-count 屬性 [^2] 是最直接的方案：

<div style="column-count: 2; column-gap: 30px;">

這是一段很長的文字內容。當內容夠長時，瀏覽器會自動將其分成兩欄顯示，就像報紙的排版一樣。這種方法不需要手動分割內容，瀏覽器會根據容器寬度自動計算每欄的高度和內容分配。

適合用在引用區塊、長段落、或者列表內容的自動分欄展示上。如果你的內容比較短，可能看不出分欄效果，因為 column-count 只在內容溢出時才會產生真正的多欄。

</div>

三欄只需要改一個數字：

<div style="column-count: 3; column-gap: 24px;">

長文字內容...

</div>

column-count 和 Flexbox/Grid 的最大區別在於：column-count 是自動流式分欄——你不需要手動決定哪些內容放左欄、哪些放右欄，瀏覽器會自動把內容按順序分配到各欄。而 Flexbox/Grid 需要你明確劃分每個欄的內容。

什麼時候用 column-count：

  • 長段落的自動分欄（類似新聞排版）
  • 列表項目的自動多欄展示
  • 不需要手動控制每欄內容的場景

什麼時候不用：

  • 需要左右欄放不同內容（比如左邊程式碼、右邊說明）
  • 欄內需要包含複雜的 Markdown 元素（標題、程式碼區塊等可能被截斷）

方法四：用表格模擬分欄

在不想用 HTML 的情況下，Markdown 表格可以模擬一個「看起來像分欄」的效果：

| 左欄 | 右欄 |
|------|------|
| 這裡是左邊的內容，可以是文字、連結等 | 這裡是右邊的內容 |
| 支援多行內容 | 每一行就是一個「行」 |

這個方法的優點是純 Markdown 語法，幾乎所有渲染器都支援。缺點也很明顯：

  • 語意不對：表格是用來展示資料的，不是用來做佈局的。對螢幕閱讀器等輔助工具來說，這會產生錯誤的語意資訊
  • 格式受限：表格儲存格裡不能放標題、程式碼區塊、引用等區塊級元素，只能放行內內容
  • 不好控制寬度：欄寬由內容自動決定，沒辦法精確控制

表格模擬分欄只適合簡單場景——如果就是想在兩邊各放一段文字，不想寫 HTML，那表格夠用了。但凡內容複雜一點，還是老老實實用 HTML+CSS。

說實話，這幾種方法裡，Flexbox 是我日常用得最多的。大部分 Markdown 編輯器和靜態站生成器都吃這一套，寫起來也不算太麻煩。

各平台的分欄支援情況

上面的方法理論上都能用，但實際效果取決於你用的平台和工具。這裡說說幾個常見平台的具體情況——踩坑踩出來的經驗，別走我的老路。

Obsidian

Obsidian 支援在 Markdown 中使用 HTML 標籤，所以 Flexbox 和 Grid 方法都能生效。但 Obsidian 有一個更好的方案：CSS Snippets [^4]。

你可以在 Obsidian 的 CSS snippets 資料夾中建立一個 CSS 檔案，定義分欄樣式：

/* 在 .obsidian/snippets/ 資料夾中建立 columns.css */
.columns-two {
  display: flex;
  gap: 20px;
}
.columns-two > div {
  flex: 1;
}

然後在 Markdown 中使用：

<div class="columns-two">

### 左欄

內容...

<div>

### 右欄

內容...

</div>
</div>

CSS snippets 的好處是把樣式邏輯和內容分開，Markdown 檔案更乾淨。

不過有個細節要注意：Obsidian 的「閱讀檢視」和「即時預覽」模式對 HTML 的渲染行為不完全一致。我實測發現，在閱讀檢視裡 Flexbox 分欄效果正常，但即時預覽模式下偶爾會出現 <div> 標籤被原樣顯示的情況。所以如果你用 Obsidian，建議以閱讀檢視的效果為準。

另外，Obsidian 社群有個 Multi-Column Markdown 外掛，提供了 ---start-multi-column--- 這種自訂語法來做分欄。功能很強大，支援設定欄寬比例、邊框、陰影等。缺點是這些語法只在 Obsidian 裡有效，換到別的編輯器就是一堆廢代碼。

MkDocs（靜態網站生成器）

如果你用 MkDocs 建置文件站，MkDocs Material 主題內建了 Grid 和 Tab 功能 [^5]。使用方式是擴展的 Markdown 語法：

<div class="grid cards" markdown>

-   ## 卡片一

    內容 A

-   ## 卡片二

    內容 B

</div>

這比手寫 CSS 方便很多，但只限於 MkDocs Material 主題。其他靜態網站生成器（Hugo、Jekyll 等）通常也支援在模板中使用 HTML+CSS 分欄，但需要自己寫樣式。

Hugo 使用者可以利用 Hugo 特有的 markdown attribute 功能，在內容區塊後面加 {.c .c2} 這樣的類名標記，再搭配 CSS 實現分欄。這個方案比直接寫 HTML 乾淨，但只對 Hugo 有效。

GitHub

這是很多人踩坑的地方：GitHub 渲染 Markdown 時會過濾掉 HTML 中的 style 屬性 [^3]。也就是說，上面所有帶 style="display: flex" 的程式碼，在 GitHub 上都不會生效——style 屬性會被直接刪除。

所以在 GitHub README 或 Issues 中，Flexbox、Grid、column-count 這些方法全都用不了。你能用的只有表格模擬分欄，而且效果很有限。

GitHub 出於安全考慮，只允許少量的 HTML 標籤和屬性通過渲染，所有自訂樣式都會被過濾。這是刻意的設計選擇，不是 bug。

如果你確實需要在 GitHub 上做並排展示，唯一的「正經」方案是用 HTML <table> 標籤（不帶 style），而且只能在 <td> 裡放行內內容。這跟純 Markdown 表格差不多，不過 HTML table 在 <td> 裡解析 Markdown 的相容性更好一些。

其他編輯器

  • Typora：支援 HTML+CSS 分欄，因為 Typora 本質上是本地瀏覽器渲染，完整的 CSS 都能用
  • VS Code 預覽：取決於你用的預覽擴充套件。大部分擴充套件的預覽視窗是本地瀏覽器，所以 HTML+CSS 方法通常有效
  • Notion：不是標準 Markdown，有自己原生的分欄功能（拖曳即可），和本文討論的方法無關
  • Pandoc：透過 fenced divs（::::）可以定義內容區塊，搭配 CSS 能實現分欄，適合生成 PDF 的場景

響應式：分欄在手機上怎麼辦？

Flexbox 和 Grid 預設不會自動在小螢幕上變成單欄。如果你需要響應式，得加上 flex-wrap: wrap（Flexbox）或使用媒體查詢。

在純 Markdown 環境中加入媒體查詢比較困難——你沒辦法在單個 Markdown 檔案裡寫 @media 規則。這通常需要在網站層級的 CSS 中處理。如果你的分欄內容是發布在網站上的，建議在外部 CSS 中加上：

@media (max-width: 768px) {
  .columns-two, .columns-three {
    flex-direction: column;
  }
}

對於 Obsidian 使用者來說，這不是問題——Obsidian 本身沒有「手機版」渲染。但如果你的 Markdown 是發布在網上的，響應式就是必須要考慮的事。

方法對比：什麼時候用什麼

根據使用場景，這裡有一個快速選擇指南：

場景推薦方法原因
個人筆記（Obsidian）CSS Snippets樣式複用，內容乾淨
文件站（MkDocs）內建 Grid 元件主題原生支援，效果最好
文件站（Hugo）Markdown attributes + CSSHugo 特有方案，程式碼乾淨
靜態網站Flexbox 或 Grid完全控制，相容性好
GitHub README表格模擬唯一能用的方法
長文字自動分欄column-count自動分配，無需手動切分
部落格/通用 MarkdownFlexbox相容性最廣的方案
生成 PDFPandoc fenced divs + CSS兼顧 HTML 和 LaTeX 輸出

還有一個需要提前確認的事：你的 Markdown 渲染器是否支援在 HTML 標籤內解析 Markdown。有些渲染器（如 kramdown、MkDocs 的渲染器）支援在 HTML 區塊內解析 Markdown，有些則不支援。如果渲染器不支援，那 <div> 內部的 Markdown 語法會原樣顯示出來。

一個簡單的判斷方法：寫個測試檔案，在 <div> 裡放一個 ### 測試標題，看看渲染出來是標題格式還是純文字。如果是純文字，說明你的渲染器不支援 HTML 區塊內 Markdown 解析，需要把內容也寫成 HTML。

常見問題

分欄在手機上會怎樣？

Flexbox 和 Grid 預設不會自動在小螢幕上變成單欄。如果需要響應式，需要在外部 CSS 中加上媒體查詢，或者在 Flexbox 中使用 flex-wrap: wrap。對於純 Markdown 檔案來說，這通常需要在網站層級處理。

有沒有 Markdown 擴展支援原生分欄？

目前主流的 Markdown 擴展中沒有被廣泛採用的分欄語法。Pandoc 的 fenced divs（::::）可以定義內容區塊，但本身不提供分欄樣式——還是需要搭配 CSS。一些平台（如 Gitiles）有自己的擴展語法（|||---|||），但僅限那個平台。這再次說明分欄本質上是樣式問題，不是語法問題。

為什麼我的分欄程式碼不生效？

最常見的原因有三個：

  1. 平台過濾了 style 屬性：GitHub 和部分線上編輯器會刪除 inline style
  2. 渲染器不支援 HTML 區塊內的 Markdown：<div> 裡的 Markdown 被原樣顯示
  3. 內容太短：column-count 需要內容夠多才能看到分欄效果

建議先確認你的平台支援哪種方法，再選擇對應的方案。

參考來源

[^1]: CommonMark Spec: https://spec.commonmark.org/[^2]: MDN Web Docs - CSS Multi-column Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout[^3]: GitHub Docs - Basic writing and formatting syntax: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax[^4]: Obsidian Help - CSS Snippets: https://help.obsidian.md/Extending+Obsidian/CSS+snippets[^5]: MkDocs Material - Grids: https://squidfunk.github.io/mkdocs-material/reference/grids/