CSS 属性column-count 负责将元素的内容分解为指定数量的列。
属性值
CSS 属性column-count 采用以下之一:以下值:
auto:要显示的列数由其他 CSS 属性决定，column-width。
<integer>:正值仅有的。指定要显示的内容的列数。
适用范围
除表格包装框之外的所有块容器。
语法
column-count = auto | <integer> CSS column-count : <integer>
在以下示例中，<p> 元素的内容分为三列:
<html>
<head>
<style>
.multicol-col-count {
column-count: 3;
}
</style>
</head>
<body>
<h1>column-count 属性</h1>
<div>
<p class="multicol-col-count">
我们住在乡下，窗前是一大片草地。草地上长满了蒲公英。当蒲公英盛开的时候，这片草地就变成金色的了。
我和弟弟常常在草地上玩耍。有一次，弟弟跑在我前面，我装着一本正经的样子，喊：“谢廖沙！”他回过头来，我就使劲一吹，把蒲公英的绒毛吹到他脸上。弟弟也假装打呵欠，把蒲公英的绒毛朝我脸上吹。就这样，这些并不引人注目的蒲公英，给我们带来了不少快乐。
有一天，我起得很早去钓鱼，发现草地并不是金色的，而是绿色的。中午回家的时候，我看见草地是金色的。傍晚的时候，草地又变绿了。这是为什么呢？我来到草地上，仔细观察，发现蒲公英的花瓣是合拢的。原来，蒲公英的花就像我们的手掌，可以张开、合上。花朵张开时，它是金色的，草地也是金色的；花朵合拢时，金色的花瓣被包住，草地就变成绿色的了。
多么可爱的草地！多么有趣的蒲公英！从那时起，蒲公英成了我们最喜爱的一种花。它和我们一起睡觉，和我们一起起床。
</p>
</div>
</body>
</html> CSS column-count: auto
在以下示例中，<p> 元素的内容根据列宽值拆分为多个列:
<html>
<head>
<style>
.col-count-width {
column-count: auto;
column-width: 250px;
}
</style>
</head>
<body>
<h1>column-count with column-width 属性</h1>
<div>
<p class="col-count-width">
我们住在乡下，窗前是一大片草地。草地上长满了蒲公英。当蒲公英盛开的时候，这片草地就变成金色的了。
我和弟弟常常在草地上玩耍。有一次，弟弟跑在我前面，我装着一本正经的样子，喊：“谢廖沙！”他回过头来，我就使劲一吹，把蒲公英的绒毛吹到他脸上。弟弟也假装打呵欠，把蒲公英的绒毛朝我脸上吹。就这样，这些并不引人注目的蒲公英，给我们带来了不少快乐。
有一天，我起得很早去钓鱼，发现草地并不是金色的，而是绿色的。中午回家的时候，我看见草地是金色的。傍晚的时候，草地又变绿了。这是为什么呢？我来到草地上，仔细观察，发现蒲公英的花瓣是合拢的。原来，蒲公英的花就像我们的手掌，可以张开、合上。花朵张开时，它是金色的，草地也是金色的；花朵合拢时，金色的花瓣被包住，草地就变成绿色的了。
多么可爱的草地！多么有趣的蒲公英！从那时起，蒲公英成了我们最喜爱的一种花。它和我们一起睡觉，和我们一起起床。
</p>
</div>
</body>
</html>