CSS - 多列佈局

您好，有志於網頁開發的同學們！今天，我們將要深入探討CSS多列佈局的精彩世界。作為你們親切友善的電腦老師，我將帶領你們通過大量的範例和解釋來開展這次旅程。那麼，我們開始吧！

CSS - Multi columns

多列佈局介紹

想像一下你正在閱讀報紙。注意到文字是如何被組織成整齊的列？這正是我們將要用CSS在網頁上實現的！多列佈局讓我們能夠創建有吸引力且易於閱讀的內容結構。

CSS 多列佈局 - 三列佈局

讓我們從基本的三列佈局開始。這對於創建雜誌風格的內容或組織網頁上的資訊非常適合。

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

在這個例子中，我們使用column-count屬性來指定我們想要三列。column-gap屬性則設置每列之間的間距。

CSS 多列佈局 - 設置列寬

有時候，你可能不想指定列數，而是想為每列設置一個特定的寬度。讓我們看看這是如何工作的：

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

在這裡，我們使用column-width來設置每列為200像素寬。瀏覽器會創建有足够能容納的列數，並保持這個寬度。

CSS 多列佈局 - 列樣式

現在，讓我們為我們的列添加一些樣式。我們可以添加邊框、更改背景顏色等等！

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

在這個例子中，我們使用column-rule作為簡寫屬性來在列之間添加點狀線。我們也可以使用column-rule-style、column-rule-width和column-rule-color這些屬性個別設置。

CSS 多列佈局 - 跨列

有時候，你可能希望一部分內容跨越大多個列。讓我們看看如何實現這一點：

<div class="spanning-columns">
<h2>這個標題跨越所有列</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">這個段落跨越兩列。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

在這裡，我們使用column-span: all來使標題跨越所有列，以及使用column-span: 2來使一個段落跨越兩列。

CSS 多列佈局 - 列與分段

分段是指內容如何在列之間分割。讓我們看看我們如何控制這一點：

<div class="fragmented-columns">
<h3>第1章</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>第2章</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

在這個例子中，我們使用break-after: column來確保每個章節標題都從新列的頂部開始。

屬性	描述
column-count	指定列數
column-width	設置每列的寬度
column-gap	定義列之間的間距
column-rule	簡寫屬性，用於設置列之間的線
column-rule-style	設置列規則的樣式
column-rule-width	設置列規則的寬度
column-rule-color	設置列規則的顏色
column-span	允許元素跨越列
break-after	控制元素後面的列斷裂