css总结11（文本列布局）

目录

样式结构图

样式说明

文本多列布局示例

补充

---

样式结构图

样式说明

### 相关样式属性：
column-count：值为一个整数值，文本显示的列数
column-width：值为一个长度单位值，每个列的宽度
columns: column_width column-count：列宽和列数的简写
column-gap：值为一个长度单位值，每个列之间的间隙
column-span：可选值为none/all，指定是否跨所有列
column-rule-width：值为一个长度单位值，列分界线宽度
column-rule-style：值为一个线条样式值，列分界线的线条样式
column-rule-color：值为一个合法颜色值，列分界线颜色
column-rule: rule_width rule_style rule_color：列边界样式简写

### 注意：
当仅设置列数(column-count)时，会根据容器尺寸自动计算列宽；
当仅设置列宽(column-width)时，也会根据容器尺寸自动计算列数；
当同时设置了列数和列宽时，将会自动计算并选择适合内容展示的某个属性(列数或列宽)；

文本多列布局示例

示例图

 示例代码

<style>
    .content {
        width: 80%;
        margin: auto;
        background-color: #f6f2e8;
        color: #333;
        padding: 0 20px 20px 20px;
        word-break: keep-all;
        font-family: "微软雅黑";
        column-count: 3;
        column-rule: 3px dashed black;
        column-gap: 80px;
    }
    /* 标题跨行居中 */
    h1 {
        column-span: all;
        text-align: center;
    }
    /* 文章首行缩进两个字符 */
    p {
        text-indent: 2em;
    }
</style>

</div class=content>
	<h1>文章1标题</h1>
	<p>文章1内容(省略)<p>
	<h1>文章2标题</h1>
	<p>文章2内容(省略)<p>
</div>

补充

虽然可以文本列布局样式可以对文本进行多列展示，但是在列合并上还有短板，无法合并指定的列数(要么跨全列，要么无合并)，所以此样式布局仅用在多列展示的文本内容上，不适用布局