CSS多列
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;
}
原文地址：https://blog.csdn.net/weixin_74261199/article/details/142674844
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！