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	定义元素在多列布局中是否应跨越一列或所有列。	试试看

打印页面