CSS多列

embedded/2024/10/4 14:44:07/

CSS多列

前言

有的时候希望文本能按照多列效果显示，如：
请添加图片描述

这时候就要把文本显示效果改成多列显示，标题独占一行

CSS文本多列使用

① column-count

指定文本分为几列，如：

css">column-count: 3;

② column-gap

指定列之间的间隔，如：

css">column-gap: 50px;

③ column-rule

定义列间隔线的宽度（column-rule-width）、线条样式（column-rule-style）、颜色（column-rule-color）

css">column-rule: 1px solid black;

④ column-width

指定列的宽度，如：

css">column-width: 150px;

⑤ column-span: all

指定当前元素占据本行所有列，主要用于修饰标题文字，如：

css">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>css">.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>