CSS多列

news/2024/10/4 2:20:46 标签: css, 前端

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>