CSS - 多列布局

CSS 提供多種屬性來設計網頁的多列布局。多列布局通常用於報紙、線上部落格、書籍等的版面設計。本章將討論如何使用 HTML 和 CSS 建立和設定多列布局的樣式。

CSS 建立多列

在 CSS 中，我們可以使用column-count 屬性來指定在任何元素內顯示文字的列數。讓我們來看一個例子

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-count {
            column-count: 3;
        }
    </style>
</head>

<body>
    <h2> Three Column Layout </h2>

    <div class="multicol-col-count">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
        quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel 
        eum iriure dolor in hendrerit in vulputate velit esse mol
    </div>
</body>

</html>

設定列寬

要建立列布局，不必使用 column-count 屬性，我們也可以使用column-width 屬性。列數將根據指定的列寬自動確定。讓我們來看一個例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-width: 100px;
        }
    </style>
</head>

<body>
    <p> <strong> Column Width 100px </strong> </p>
    <div class="multicol-col-width">
        Lorem ipsum dolor sit amet, con sec tetuer ad ipis cing el 
        sed diam nonummy nibh eui smod tincidunt ut laoreet dolo 
        magna aliquam erat volutpat. Ut wisi enim ad minim veni, 
        quis nostr ud exerci tation ulla mc orper suscipit lob ort 
        nisl ut aliq uip ex ea comm odo cons equat. Duis au tem 
        eum iriure dolor in hen drerit in vul put ate ve lit esse mol
        estie con se quat, vel ill
    </div>
</body>

</html>

CSS 指定列間距

要指定列間距，我們可以使用column-gap 屬性。讓我們來看一個例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-width: 100px;
            column-gap: 40px;
        }
    </style>
</head>

<body>
    <p> <strong> Column Gap 40px </strong> </p>
    <div class="multicol-col-width">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
        quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel 
        eum iriure dolor in hendrerit in vulputate velit esse mol
        estie consequat, vel illum dolore eu feugiat nulla facilisis 
    </div>
</body>

</html>

CSS 列規則

在 CSS 多列布局中，我們可以使用列規則屬性在列之間新增規則（或線條）。以下是 CSS 中的列規則屬性

column-rule-style: 定義列之間線條的樣式（例如，實線、虛線）。
column-rule-color: 設定列之間線條的顏色。
column-rule-width: 指定列之間線條的寬度（粗細）。
column-rule: 一個簡寫屬性，用於設定列之間線條的樣式、顏色和寬度。

讓我們來看一個關於這些屬性的例子。

示例

<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-width {
            column-count: 3;
            column-rule-style: dashed;
            column-rule-color: red;
            column-rule-width: 3px;
        }
    </style>
</head>

<body>
    <div class="multicol-col-width">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
        magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
        quis nostrud exerci tation ullamcorper suscipit lobortis 
        nisl ut aliquip ex ea commodo consequat. Duis autem vel 
        eum iriure dolor in hendrerit in vulputate velit esse mol
        estie consequat, vel illum dolore eu feugiat nulla facilisis 
        averunt lectores legere me lius quod ii legunt saepius.
    </div>
</body>

</html>

CSS 在多列布局中跨列

如果要新增標題或任何其他跨越佈局中所有列的元素，可以使用column-span 屬性。此屬性的值如下

column-span: all - 標題將跨越佈局中的所有其他列。
column-span: none - 標題將作為單獨的一列放置。

<!DOCTYPE html>
<html>

<head>
    <style> 
        .multicol-col-rule {
            column-count: 3;
            column-rule: 3px solid;
        }

        .colspan-none {
            column-span: none;
            background-color: lightskyblue;
        }
        .colspan-all{
            column-span: all;
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
   <div class="multicol-col-rule">
        <h1 class="colspan-none" >Heading on First Columns</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipi
            scing elit, sed diam nonummy nibh euismod tincidunt ut 
            laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor 
            sit amet, conse ctetuer adip iscing elit, sed diam nonu 
            mmy nibh euis mod tincidunt ut laoreet dolore magna aliq
            am erat volutpat.
        </p>
    </div>     

    <div class="multicol-col-rule">
        <h1 class="colspan-all" >Heading spanning across all columns</h1>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci ta
            tion ullamcorper suscipit lobortis nisl ut aliquip ex 
            ea commodo consequat. Duis autem vel eum iriure dolor 
            in hendrerit in vulputate velit esse molestie consequat, 
            vel illum dolore eu feugiat nulla facilisis at vero eros
        </p>
   </div>
</body>
</html>

下表顯示了 CSS 中支援的所有多列布局屬性。

屬性	描述	示例
column-count	指定元素在多列布局中顯示時被分成多少列。	試試看
column-fill	指定如何填充列。	試試看
column-gap	設定元素列之間的間隙大小。	試試看
column-width	設定多列布局中的列寬。	試試看
column-rule	簡寫屬性，設定多列布局中列之間繪製的線條的顏色、樣式和寬度。	試試看
column-rule-color	設定多列布局中列之間繪製的線條的顏色。	試試看
column-rule-style	設定多列布局中列之間繪製的線條的樣式。	試試看
column-rule-width	設定多列布局中列之間繪製的線條的寬度。	試試看
column-span	定義元素在多列布局中是否應跨越一列或所有列。	試試看

列印頁面