CSS - column-fill 属性



CSS 属性 column-fill 负责在分解为列时平衡元素的内容。

可能的值

CSS 属性 column-fill 采用以下值之一,其中初始值为 balance:

  • auto:按顺序填充色谱柱。内容仅占用所需空间。这可能会导致某些列保持为空。
  • balance:各列之间的内容平均分配。在分段上下文中,如分页媒体,只有最后一个片段/最后一页是平衡的。它是初始值。

适用于

所有 multicol 元素。

语法


column-fill = auto | balance

CSS column-fill - 平衡列内容

在以下示例中,<p> 元素的内容被拆分为三列:


<html>
<head>
<style>	
	 	p {
	 	 	 column-count: 3;
	 	 	 column-rule: 5px solid black;
	 	}

	 	.col-fill-auto {
	 	 	 column-fill: auto;
	 	}

	 	.col-fill-balance {
	 	 	 column-fill: balance;
	 	}

	 	#p-auto {
	 	 	 background-color: pink;
	 	}

	 	#p-bal {
	 	 	 background-color: lightblue;
	 	}
</style>
</head>
<body>
	 	<h1>column-fill property</h1>

	 	<div>
	 	 	 <h2>column-fill: auto</h2>
	 	 	 <p class="col-fill-auto" id="p-auto">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>
	 	 	 <h2>column-fill: balance</h2>
	 	 	 <p class="col-fill-balance" id="p-bal">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>