CSS - columns 属性

CSS 属性 columns 是一个速记属性，用于设置在显示元素内容时要使用的列数以及这些列的宽度。

Columns 是以下属性的简写：

column-count
column-width

可能的值

CSS 属性列被指定为下面列出的一个或两个值，顺序不限：

<'column-width'>：指定为 <length> 值或关键字 auto。根据可用空间，实际宽度可能更宽或更窄，以适应。引用列宽。
<'column-count'>：指定为<整数>值或关键字 auto。显示要在其中显示元素内容的列数。引用列计数。

适用于

除包装盒外的所有块状容器。

语法


columns = <'column-width'> || <'column-count'>

CSS 列 - <'column-count'> 值

在以下示例中，columns 速记属性用于将列数设置为三，其中不传递 column-width 的值：


<html>
<head>
<style>	
	 	.multicol-col-rule {
	 	 	 columns: 3;
	 	}

	 	p {
	 	 	 background-color: bisque;
	 	}
</style>
</head>
<body>
	 	<h1>columns property</h1>

	 	<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>
	 	 	 <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 列 - 自动值

在以下示例中，columns shorthand 属性用于将列数设置为 auto 和 column-width： 10rem：


<html>
<head>
<style>	
	 	.multicol-col-rule {
	 	 	 columns: 10rem auto;
	 	}

	 	p {
	 	 	 background-color: bisque;
	 	}
</style>
</head>
<body>
	 	<h1>columns property</h1>

	 	<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>
	 	 	 <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 列 - <'column-width'> 值

在以下示例中，columns 速记属性用于根据列宽值设置列数，而不直接为 column-count 指定值：


<html>
<head>
<style>	
	 	.multicol-col-rule {
	 	 	 columns: 15em;
	 	}

	 	p {
	 	 	 background-color: bisque;
	 	}
</style>
</head>
<body>
	 	<h1>columns property</h1>

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

打印本页