CSS3 多列

CSS3 多列

CSS3 多列布局（Multi-column Layout）允许开发者轻松地将内容分割成多列显示，类似于报纸的排版方式。这种布局方式特别适合处理大段文本内容。

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 column-count 列数

CSS3 的column-count属性，用于指定元素内容应该被分割的列数。

.example {
    -webkit-column-count: 3;    /* Chrome, Safari, Opera */
    -moz-column-count: 3;       /* Firefox */
    column-count: 3;
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 column-width 列宽

CSS3 的column-width属性，用于指定每列的理想宽度。浏览器会根据这个值和可用空间自动调整列数。

.example {
    -webkit-column-width: 200px;    /* Chrome, Safari, Opera */
    -moz-column-width: 200px;       /* Firefox */
    column-width: 200px;
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 columns 简写属性

CSS3 的columns属性，用于同时设置多列布局中的列宽和列数。它是column-width和column-count两个属性的简写形式。

.example {
    /* 三列，每列宽度为200px */
    columns: 3 200px;

    /* 等同于以下这两个属性结合 */
    column-count: 3;
    column-width: 200px;
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 column-gap 间隙

CSS3 的column-gap属性，用于指定列与列间的间隙。

.example {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 column-rule 分割线

CSS3 的column-rule属性，用于设置列之间的分割线，类似于border属性。

.example {
    -webkit-column-rule: 1px solid #fff; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid #fff; /* Firefox */
    column-rule: 1px solid #fff;
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。这样的时刻，平凡却闪着微光，像藏在记忆里的糖，总在不经意间甜了心房。

CSS3 column-span 跨列控制

CSS3 的column-span跨列控制属性，允许元素跨越所有列。

.example {
    column-count: 3;
}

.example div{
    column-span: all; /* 可以是all或none */
}

实现的效果：

CSS3 column-fill 列填充与平衡

CSS3 的column-fill属性，用于控制内容在多列中的分布方式，特别是在内容不能完全填满所有列时。

.example {
    column-fill: balance;    /* 浏览器会尽量平衡各列的内容分布 */
    column-fill: auto;       /* 按顺序填充各列 */
}

实现的效果：

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。

春日的午后，阳光慵懒地洒在窗台上。微风拂过，带来远处槐花的清香。桌上的咖啡冒着热气，书页在风中轻轻翻动。街角传来孩子们的嬉笑声，一只花猫蜷在墙根打盹。时光仿佛在此刻慢了下来，让人想起某个相似的黄昏——那时槐花也开得正好，而岁月尚不知愁。

CSS3 多列属性

下表列出了所有 CSS3 的多列属性：