CSS - 多列布局

CSS 提供了一个多列布局，有助于在列中显示内容。在报纸上看起来就是这样。这通常称为 multicol。

CSS 多列布局 - 三列布局

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

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


<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 多列布局 - 设置列宽

在以下示例中，使用 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 多列布局 - 设置列样式

您不能单独设置由 multicol 创建的列的样式。CSS 提供了一些属性，可让您修改列的显示方式。

1. column-gap 属性可用于更改列之间的间隙大小。

2. column-rule 属性是在列之间添加规则。column-rule 是 properties、column-rule-color、column-rule-style 和 column-rule-width 的简写。它接受与 border 属性相同的值。

在以下示例中，column-rule 用作速记属性来设置列的样式。


<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 多列布局 - 跨列

可以使元素跨越各列，在这种情况下，内容会在添加跨区元素的地方中断，然后在跨区元素下方继续。它创建一组新的列。当您希望元素跨越所有列时，请为 column-span 属性添加值 all。

在以下示例中，column-span 用于添加跨所有列的元素。


<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 多列布局 - 列和碎片

在多列布局中，内容在列中显示，因为它们是零碎的。为了控制 multicol 或分页媒体中内容的中断，CSS 提供了属性内部中断。此属性允许内容中断，以便它不会在列之间分段。

没有内部闯入属性的碎片化

在以下示例中，您将看到列中内容的碎片化，而不使用 break-inside 属性：


<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>

使用 break-inside 属性进行分段

在以下示例中，您将看到使用 break-inside 属性的列中内容的碎片化：


<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>

属性	描述
column-count	指定在多列布局中显示元素时划分为的列数。
column-fill	指定如何填充列。
column-gap	设置元素的列之间的间隙大小。
column-width	设置多列布局中的列宽。
column-rule	简写属性，用于设置多列布局中各列之间绘制的线的颜色、样式和宽度。
column-rule-color	设置多列布局中各列之间绘制的线的颜色。
column-rule-style	设置多列布局中在列之间绘制的线条的样式。
column-rule-width	设置多列布局中各列之间绘制的线的宽度。
column-span	定义在多列布局中，元素是应跨一列还是跨所有列。