CSS多列
前言
有的时候希望文本能按照多列效果显示，如：
这时候就要把文本显示效果改成多列显示，标题独占一行
CSS文本多列使用
① column-count
指定文本分为几列，如：
column-count: 3;
② column-gap
指定列之间的间隔，如：
column-gap: 50px;
③ column-rule
定义列间隔线的宽度（column-rule-width）、线条样式（column-rule-style）、颜色（column-rule-color）
column-rule: 1px solid black;
④ column-width
指定列的宽度，如：
column-width: 150px;
⑤ column-span: all
指定当前元素占据本行所有列，主要用于修饰标题文字，如：
column-span: all;
案例
上面卡片的效果，代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS多列</title>
</head>
<body><div class="article"><h1 class="title">斗破苍穹 -- 药老</h1><div class="content">药尘，天蚕土豆所著异世大陆类玄幻小说《斗破苍穹》及其衍生作品中的角色，《斗破苍穹前传之药老传奇》的主角，《大主宰》中为客串角色，人称药尊者、药圣。
大陆第一炼药师 [1]，八品高级炼药宗师 [2]，后为九品宝丹炼药宗师 [3]。中州星陨阁阁主 [4]、天府联盟盟主 [5]，拥有异火榜排名十一的骨灵冷火 [6]，后转赠萧炎 [1]。九转斗尊巅峰强者 [7]，在萧炎的帮助下重获肉身，突破至半圣 [8]，后又借助萧炎所带回的黄泉妖圣精血突破至一星斗圣 [9]。来到大千世界后成为无尽火域太上长老，修为达到仙品天至尊后期 [10]。
萧炎的老师，视萧炎为子，是萧炎修炼道路上最为重要的引路人，可以说，没有药尘，就不会有“炎帝” [11-12]</div></div>
</body>
<style>.article {box-shadow: 0 0 2px 1px grey;border: 1px solid gray;border-radius: 10px;padding: 0 40px;margin: 100px auto;width: 600px;height: 330px;background-color: rgba(128, 128, 128, 0.189);/* 文本显示为3列 */column-count: 3;/* 列间隙为50px */column-gap: 50px;/* 间隔线宽度1px，实线，黑色 */column-rule: 1px solid black;/* 设置列宽度为150px */column-width: 150px;}.title {color: rgb(134, 149, 163);/* 让当前元素占据本行所有列 */column-span: all;}.content {color: rgb(134, 149, 163);text-align: justify;text-indent: 2em;}
</style>
</html>
(134, 149, 163);
text-align: justify;
text-indent: 2em;
}
