CSS多列布局可以让块级元素的内容自动分成多列展示，不需要手动拆分内容或者使用浮动、弹性布局等复杂方案，column_count就是控制列数的核心属性，通过它可以快速定义内容需要分成多少列。
column_count基础介绍
column_count是CSS多列布局模块中的属性，用于指定一个元素应该被分割成的列数，它属于CSS3新增的属性，目前所有主流浏览器都支持该属性，不需要添加浏览器前缀。
它的基本语法如下：
/* 取值说明 */
/* number：正整数，表示具体的列数 */
/* auto：默认值，列数由其他属性（如column_width）决定 */
.element {
column-count: 3; /* 将元素内容分成3列 */
}
column_count核心取值说明
- auto：默认值，此时列数不会固定，浏览器会根据column_width的取值自动计算合适的列数，如果column_width也设置为auto，那么内容会保持单列展示。
- 正整数：直接指定列数，比如设置为2就是两列，设置为4就是四列，列数会优先按照这个取值生效，除非容器宽度不足以容纳指定列数，此时浏览器会自动减少列数保证布局正常。
column_count配合其他多列属性使用
单独使用column_count只能控制列数，实际开发中通常需要配合其他多列属性调整布局效果，常用的配合属性如下：
| 属性名 | 作用 | 常用取值 |
|---|---|---|
| column-gap | 设置列与列之间的间距 | px、em、rem等单位，比如20px |
| column-rule | 设置列之间的分割线样式 | 宽度 样式 颜色，比如1px solid #ccc |
| column-width | 设置每一列的最小宽度 | px、em等单位，比如200px |
完整多列布局示例
下面是一个使用column_count实现三列布局的完整示例，包含列间距和分割线配置：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS多列布局示例</title>
<style>
.multi-column-box {
/* 固定分成3列 */
column-count: 3;
/* 列之间间距20px */
column-gap: 20px;
/* 列之间添加1px灰色实线分割线 */
column-rule: 1px solid #cccccc;
/* 每一列最小宽度150px，当容器宽度不足时会自动减少列数 */
column-width: 150px;
padding: 15px;
border: 1px solid #eeeeee;
line-height: 1.6;
}
.multi-column-box h3 {
/* 标题跨所有列展示 */
column-span: all;
text-align: center;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="multi-column-box">
<h3>多列布局示例内容</h3>
<p>这是一段测试文本，用于展示CSS多列布局的效果。当内容长度超过单列高度时，会自动流向下一列，形成多列排版的效果。</p>
<p>多列布局非常适合展示长文章、产品列表、图片墙等内容，不需要手动拆分内容，浏览器会自动处理内容的流式分布。</p>
<p>你可以通过调整column_count的取值来改变列数，比如设置为2就是两列布局，设置为4就是四列布局，配合column_gap可以调整列间距，让布局更符合设计需求。</p>
<p>需要注意的是，多列布局中的内容是从上到下、从左到右排列的，第一列排满后才会排第二列，和报纸的排版逻辑一致。</p>
</div>
</body>
</html>
column_count使用注意事项
- 如果同时设置了column_count和column_width，浏览器会优先满足column_width的要求，自动计算列数，只有当column_width设置为auto时，column_count的指定列数才会生效。
- 多列布局的内容是连续流动的，无法单独控制某一列的内容，如果需要精确控制每一列的内容，不建议使用多列布局，更适合用弹性布局或者网格布局。
- column_count不会影响元素内部的块级子元素的布局，比如内部的<div>元素默认还是会占满当前列的宽度，不会跨列，如果需要跨列可以使用column-span属性。
- 当容器宽度过小时，即使设置了较大的column_count值，浏览器也会自动减少列数，避免列宽过小导致内容无法阅读。
注意：如果需要在多列布局中添加链接，在代码块内部可以使用<a href="https://ipipp.com">示例链接</a>这样的写法，但是在正文其他位置不要添加可点击的链接标签。
CSS多列布局column_countcolumn_gapcolumn_rulecolumn_width修改时间：2026-06-25 18:15:39