CSS3多列布局怎么实现_报纸式排版columns属性用法【教程】

columns属性需作用于块级容器，简写等价于column-count和column-width，优先满足宽度；用break-inside: avoid防止单元断裂，column-gap和column-rule调节列间距与分隔线，column-span: all实现跨列标题或图片。

直接用 columns 就能实现报纸式多列排版，但浏览器默认会把内容机械切分，不考虑语义断行、标题孤立、图片跨列等实际问题——这些得靠配套属性手动干预。

columns 属性怎么写才生效

columns 是简写，等价于同时设 column-count 和 column-width。浏览器会优先满足 column-width（目标列宽），再尽可能凑够 column-count（列数），二者冲突时以宽度为准。

常见写法：

article {
  columns: 3;           /* 只设列数，宽度由容器自动算 */
  columns: 200px;         /* 只设宽度，列数由容器宽度除以200px决定 */
  columns: 4 180px;       /* 先尝试4列，每列约180px；若容器太窄，自动减少列数 */
}

注意：columns 必须作用在**块级容器**上（如 div、article），对 inline 元素无效；且容器需有明确高度或足够内容，否则看不出分列效果。

内容被硬切开？用 break-inside 防止单元格断裂

默认情况下，p、h2、li 这类块级元素可能被劈成两半，出现在不同列里。用 break-inside 可禁止内部断行：

• break-inside: avoid：最常用，阻止元素被拆到不同列（如不让一个 h3 头部单独占一列下半部分）
• break-inside: avoid-column：更严格，连 column 内的分页/分栏都避免（兼容性稍差）

推荐加在语义单元上：

article h2,
article p,
article figure {
  break-inside: avoid;
}

首行缩进、列间距、列线怎么调

多列不是单纯“复制粘贴”，需要视觉连贯性：

• column-gap：列间空白，默认 1em，可设为 2rem 或 16px
• column-rule：列之间加线，如 column-rule: 1px solid #eee（注意：它不占布局空间，是画在 gap 上的）
• text-indent 仍有效：首行缩进照常写，各列第一段都会缩进

特别注意：column-gap 和 column-rule 在 Flex/Grid 容器里无效，只对多列布局起作用。

图片和表格跨列显示不了？用 column-span

column-span 是唯一能让元素横跨所有列的属性，目前仅支持 none 和 all 两个值（Firefox 还不支持 all）：

article h1 {
  column-span: all;   /* 标题独占一行，横跨全部列 */
  text-align: center;
}
article figure {
column-span: all;   / 图片铺满整行，不被切进某一列 /
margin: 1rem auto;
}

限制很明确：只能用于**直属于多列容器的子元素**，嵌套一层就失效；且必须是块级元素（display: block 或类似）。

真正难的不是写对 columns，而是处理标题孤悬、图片错位、列表项断裂这些细节——它们不会报错，但会让排版看起来像没调完的草稿。