1. 學習
  2. 核心學習模組
  3. CSS 佈局
  4. 多列布局

多列布局

多欄佈局規範提供了一種將內容排列成多欄的方法，就像您在報紙上看到的那樣。本文將介紹如何使用此功能。

預備知識 HTML 基礎（學習 使用 HTML 構建內容），以及對 CSS 工作原理的理解（學習 CSS 樣式基礎）。
目標 學習如何在網頁上建立多欄佈局，就像您在報紙上可能找到的那樣。

一個基本示例

讓我們探索如何使用多欄佈局 — 通常稱為 multicol。您可以透過 下載 multicol 起始檔案 並將 CSS 新增到相應的位置來跟隨學習。在本節的底部，您可以檢視最終程式碼應是什麼樣子的示例。

三欄佈局

我們的起始檔案包含一些非常簡單的 HTML：一個帶有 container 類的包裝器，其中包含一個標題和一些段落。

帶有 container 類的 <div> 將成為我們的 multicol 容器。我們透過使用以下兩個屬性之一來啟用 multicol：column-count 或 column-width。column-count 屬性以數字作為其值，並建立該數量的欄。如果您將以下 CSS 新增到您的樣式表中並重新載入頁面，您將獲得三欄：

css
.container {
  column-count: 3;
}

您建立的欄具有靈活的寬度 — 瀏覽器會計算如何為每欄分配空間。

設定欄寬

將您的 CSS 更改為使用 column-width，如下所示：

css
.container {
  column-width: 200px;
}

瀏覽器現在會為您提供指定大小的儘可能多的欄；任何剩餘空間將在現有欄之間共享。這意味著除非您的容器正好能被該寬度整除，否則您不會得到正好是您指定寬度的欄。

設定欄的樣式

multicol 建立的欄無法單獨設定樣式。無法使一欄比其他欄大，也無法更改單欄的背景或文字顏色。您有兩種機會可以更改欄的顯示方式：

使用上面的示例，透過新增 column-gap 屬性來更改間隙大小。您可以嘗試不同的值 — 該屬性接受任何長度單位。

現在，使用 column-rule 在欄之間新增規則。與您在先前課程中遇到的 border 屬性類似，column-rule 是 column-rule-color、column-rule-style 和 column-rule-width 的簡寫，並接受與 border 相同的值。

css
.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79 185 227);
}

嘗試新增不同樣式和顏色的規則。

需要注意的是，規則本身不佔用任何寬度。它位於您使用 column-gap 建立的間隙上。要在規則兩側建立更多空間，您需要增加 column-gap 的大小。

跨欄

您可以使一個元素跨越所有欄。在這種情況下，內容將在跨欄元素的引入處中斷，然後在元素下方繼續，建立一個新的欄集。要使一個元素跨越所有欄，請為 column-span 屬性指定 all 值。

注意：無法使一個元素僅跨越部分欄。該屬性只能具有 none（預設值）或 all 的值。

欄與分段

多欄佈局的內容是分段的。它本質上與分頁媒體中的內容行為相同，例如列印網頁時。當您將內容轉換為 multicol 容器時，它會分段成欄。為了讓內容做到這一點，它必須中斷。

分段框

有時，這種中斷會在導致閱讀體驗不佳的地方發生。在下面的示例中，我使用 multicol 來佈局一系列框，每個框內部都有一個標題和一些文字。如果欄在兩者之間分段，標題將與文字分開。

html
<div class="container">
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>

  <div class="card">
    <h2>I am the heading</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
      Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
    </p>
  </div>
</div>
css
.container {
  column-width: 250px;
  column-gap: 20px;
}

.card {
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin-bottom: 1em;
}

設定 break-inside

為了控制這種行為，我們可以使用 CSS 分段規範中的屬性。此規範為我們提供了控制 multicol 和分頁媒體中內容中斷的屬性。例如，透過將 break-inside 屬性設定為 avoid 值新增到 .card 的規則中。這是標題和文字的容器，因此我們不希望它被分段。

css
.card {
  break-inside: avoid;
  background-color: rgb(207 232 220);
  border: 2px solid rgb(79 185 227);
  padding: 10px;
  margin-bottom: 1em;
}

新增此屬性後，框將保持為一個整體 — 它們現在不會跨欄分段。

總結

您現在知道如何使用多欄佈局的基本功能了，這是您在為正在構建的設計選擇佈局方法時可用的又一個工具。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.