Css 简明教程

CSS - Multiple-column layout

CSS 提供了一个多列布局，可帮助在列中显示内容。它看上去就像报纸中的那样。这通常称为 multicol 。

CSS provides a multiple-column layout that helps is displaying the content in columns. It appears like that in a newspaper. This is generally referred to as multicol.

CSS Multiple-column layout - Three-column layout

三列布局包含三列。使用 * column-count* 或 * column-width* 等属性启用 Multicol。让我们看看使用这两个属性的示例：

A three-column layout contains three columns. Multicol is enabled using the properties such as column-count or column-width. Let us see the examples using these two properties:

在以下示例中，使用了 * column-count* ，并且内容显示在三列中。

In the following example, column-count is used and the content is displayed in three columns.

<html>
<head>
<style>
   .multicol-col-count {
      column-count: 3;
   }
</style>
</head>
<body>
   <h1>column-count Property</h1>
   <p>As per the <strong>column-count</strong> property the content is displayed in columns:</p>

   <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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Setting column-width

在以下示例中，使用了 column-width ，并且内容根据列宽显示在列中。

In the following example, column-width is used and the content is displayed in columns based on the column width.

<html>
<head>
<style>
   .multicol-col-width {
      column-width: 200px;
   }
</style>
</head>
<body>
   <h1>column-width Property</h1>
   <p>As per the <strong>column-width</strong> property the content is displayed in columns, based on the width of the column:</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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Styling columns

您不能逐个设置 multicol 创建的列的样式。CSS 提供了一些属性，通过这些属性您可以修改列的显示方式。

You can not style columns created by multicol, individually. There are some properties provided by CSS that let you modify the way columns are displayed.

column-gap property can be used to change the size of the gap between the columns.
column-rule property is to add a rule between columns. column-rule is a shorthand for properties, column-rule-color, column-rule-style, and column-rule-width. It accepts same values as the border property.

在下面的示例中， * column-rule* 用作简写属性来设置列的样式。

In the following example, column-rule is used as a shorthand property to style the columns.

<html>
<head>
<style>
   .multicol-col-rule {
      column-count: 4;
      column-gap: 50px;
      column-rule: 5px dashed red;
   }
</style>
</head>
<body>
   <h1>column-rule Property</h1>
   <p>As per the <strong>column-rule</strong> property the content is displayed in columns, and styles are added to the columns:</p>

   <div class="multicol-col-rule">
      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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </div>
</body>
</html>

CSS Multiple-column layout - Spanning columns

元素可以跨列设置，在这种情况下，内容在跨越元素添加位置断开，然后在跨越元素下方继续。它会创建一组新的列。当您希望使某个元素跨越多列时，为 * column-span* 属性添加值 all 。

An element can be made to span across the columns, in which case, the content breaks where the spanning element is added and then continues below the spanning element. It creates a new set of columns. When you want an element to span all the columns, add the value all for column-span property.

在下面的示例中， * column-span* 用于添加跨多列的元素。

In the following example, column-span is used to add an element that spans across all the columns.

<html>
<head>
<style>
   .multicol-col-rule {
      column-count: 3;
      column-gap: 50px;
      column-rule: 5px dashed red;
   }

   h1 {
      column-span: all;
      background-color: lightskyblue;
   }
</style>
</head>
<body>
   <p>As per the <strong>column-span</strong> property the element gets spanned across all the columns:</p>

   <div class="multicol-col-rule">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <h1>Heading spanning across all the columns</h1>
      <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
   </div>
</body>
</html>

CSS Multiple-column layout - Columns and fragmentation

在多列布局中，内容会在被分段时以列的形式显示。为了控制在多列或分页媒体中内容的断行，CSS 提供了 * break-inside* 属性。此属性允许文本断行，以便文本不会跨越多个列被分段。

In a multiple-column layout the content is displayed in columns as they are fragmented. In order to control the breaking of content in a multicol or paged media, CSS provides property break-inside. This property lets the content break such that it does not fragment across the columns.

Fragmentation Without break-inside Property

在下面的示例中，您将看到不使用 * break-inside* 属性时文本在列中的分段：

In the following example you will see the fragmentation of content in columns without using the break-inside property:

<html>
<head>
<style>
   .container {
      column-count: 3;
      column-gap: 20px;
   }

   .box {
      background-color: lightskyblue;
      border: 2px solid black;
      padding: 5px;
      margin: 20px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
   </div>
</body>
</html>

Fragmentation Using break-inside Property

在下面的示例中，您将看到在列中使用 break-inside 属性时文本的分段：

In the following example you will see the fragmentation of content in columns using the break-inside property:

<html>
<head>
<style>
   .container {
      column-count: 3;
      column-gap: 20px;
   }

   .box {
      break-inside: avoid;
      background-color: lightskyblue;
      border: 2px solid black;
      padding: 5px;
      margin: 20px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>

      <div class="box">
         <h1>Heading</h1>
         <p>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 molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
      </div>
   </div>
</body>
</html>

Related properties

CSS 支持多个列将文本排列成报纸结构。下表显示了与多列布局相关的 CSS 所支持的属性列表：

CSS supports multiple columns to arrange the text as a news paper structure. Following table shows the list of properties that are supported by CSS in relation to multi-column layout:

Property

Description

column-count

Specifies the number of columns an element is divided into when displayed in a multi-column layout.

column-fill

Specifies how to fill columns.

column-gap

Sets the size of the gap between an element’s columns.

column-width

Sets the column width in a multi-column layout.

column-rule

Shorthand property that sets the color, style, and width of the line drawn between columns in a multi-column layout.