CSS3 基础（8）—— CSS3多列布局（Multi-column）

最新推荐文章于 2023-07-19 09:01:28 发布

poorpenguin

最新推荐文章于 2023-07-19 09:01:28 发布

阅读量953

点赞数 2

分类专栏：前端 CSS3

本文链接：https://blog.csdn.net/weixin_39141044/article/details/82432866

版权

前端同时被 2 个专栏收录

44 篇文章 3 订阅

订阅专栏

CSS3

10 篇文章 2 订阅

订阅专栏

多列布局（Multi-column）

多列布局就是将文本内容设计成像报纸那样的多列布局。或者说在之前我们通过js或者JQuery才能实现的瀑布流，在CSS3中我们可以直接通过CSS就可以实现，虽然有兼容性上面的问题。。。

兼容性

IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1

多列布局的属性

columns：设置对象的列数和每列的宽度。是复合属性。
column-width：设置对象没列的宽度。
column-count：设置列数
column-gap：设置列与列之间的间隙
column-rule：设置列与列之间的边框（我更喜欢称为分割线），复合属性。
column-span：设置元素是否跨所有列。
column-fill：设置对象所有列的高度统一（目前主流浏览器都不兼容）。（排版）
column-break：设置换行，复合属性，有3个子属性。

1.columns 设置对象的列数个每列的宽度

设置或检索对象的列数和每列的宽度。

语法：columns: <'column-width'> || <'columns-count'>;

参数说明

第一个参数指每列的宽度
第二个参数指列数。可写两个，也可写一个。

两个参数优先考虑列数（在放的下的情况下）。若是宽度不够（列数*设置的宽度>容器的宽度），将会自动减小一列，并自动加宽段落的宽度，使之达到容器的宽度。中间自动生成合适的间距。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
        *{margin: 0;padding: 0;}
        div.test1,div.test2{
            border: 20px solid rgba(0,0,0.3);
        }
        div.test1{
            width: 900px;
            -webkit-columns: 300px 4;
            -moz-columns: 300px 4;
            columns: 300px 4;
        }
        div.test1>div{
            margin-top: 20px;
            border: 2px solid red;
        }
        div.test2{
            -webkit-columns: 400px;
            -moz-columns: 400px;
            columns: 400px;
        }
        div.test2>div{
            margin-top: 20px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="test1">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
        <div>此外，万安县纪委监委已对县教育体育局、县市场和质量监督管理局、涧田乡政府等相关单位和人员履职尽责情况进行了调查，并对监管不力的县教育体育局、县市场和质量监督管理局、县农业局、县卫计委、涧田乡政府等相关单位责任人分别进行了立案审查等处理。同时，县纪委监委对学生营养餐的招投标工作进行调查，待调查结果出来后第一时间向社会公布。</div>
    </div>
    <br>
    <div class="test2">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
        <div>此外，万安县纪委监委已对县教育体育局、县市场和质量监督管理局、涧田乡政府等相关单位和人员履职尽责情况进行了调查，并对监管不力的县教育体育局、县市场和质量监督管理局、县农业局、县卫计委、涧田乡政府等相关单位责任人分别进行了立案审查等处理。同时，县纪委监委对学生营养餐的招投标工作进行调查，待调查结果出来后第一时间向社会公布。</div>
    </div>
</body>
</html>

这里写图片描述

ps: 设置div.test1的columns：300px 4; 也就是每列宽度300px,一共有4列，但是容器的为900px，小于1200px，所以会自动减少列数，适当增加列宽来以最合适的方式来显示。而div.test2没有设置容器宽度，列宽设置为300px，列数设置为4列，会有限考虑列数去优化列宽。

2.column-width 设置列宽

语法

columns-width：<length> | auto默认;

: 用长度值来定义列宽，不允许负值；auto：根据列数自定分配宽度。
虽说设置了列宽，但还是会根据列数和容器宽度来自动分配宽度。

PS：每列中的空隙为14像素。

3.column-count 设置列数

设置或检索对象的列数。

语法

column-count：<integer> | auto;

参数说明：: 用整数值来定义列数，不允许负值；auto：根据列宽自定分配宽度。

4.column-gap 设置列之间的间隙

设置或检索对象的列与列之间的间隙。

语法

column-gap：<length> | normal;

参数说明：用长度值来定义列与列之间的间隙（不是字与字间的距离，而是段落和段落间的距离），不允许负值；normal：与字体大小相同。normal间隙取决于字体大小。和字体大小相等。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列布局</title>
    <style>
        *{margin: 0;padding: 0;}
        div.test1,div.test2,div.test3{
            border: 20px solid rgba(0,0,0.3);
        }
        div.test1>div,div.test2>div,div.test3>div{
            background-color: rgb(0,0,0,.3);
            margin-top: 20px;
        }
        div.test1{
            width: 900px;
            columns: 300px 4;
            font-size: 14px;
        }
        div.test2{
            columns: 400px;
            font-size: 30px;
        }
        div.test3{
            column-count: 4;
            column-gap: 14px;
        }
    </style>
</head>
<body>
    <h3>字体：14px，没有设置间隙：默认和字体一样14px;</h3>
    <div class="test1">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
        <div>此外，万安县纪委监委已对县教育体育局、县市场和质量监督管理局、涧田乡政府等相关单位和人员履职尽责情况进行了调查，并对监管不力的县教育体育局、县市场和质量监督管理局、县农业局、县卫计委、涧田乡政府等相关单位责任人分别进行了立案审查等处理。同时，县纪委监委对学生营养餐的招投标工作进行调查，待调查结果出来后第一时间向社会公布。</div>
    </div>
    <br>
    <h3>字体：30px,没有设置间隙：默认和字体一样30px;</h3>
    <div class="test2">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
        <div>此外，万安县纪委监委已对县教育体育局、县市场和质量监督管理局、涧田乡政府等相关单位和人员履职尽责情况进行了调查，并对监管不力的县教育体育局、县市场和质量监督管理局、县农业局、县卫计委、涧田乡政府等相关单位责任人分别进行了立案审查等处理。同时，县纪委监委对学生营养餐的招投标工作进行调查，待调查结果出来后第一时间向社会公布。</div>
    </div>
    <br>
    <h3>字体：30px,设置间隙：14px;</h3>
    <div class="test3">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
        <div>此外，万安县纪委监委已对县教育体育局、县市场和质量监督管理局、涧田乡政府等相关单位和人员履职尽责情况进行了调查，并对监管不力的县教育体育局、县市场和质量监督管理局、县农业局、县卫计委、涧田乡政府等相关单位责任人分别进行了立案审查等处理。同时，县纪委监委对学生营养餐的招投标工作进行调查，待调查结果出来后第一时间向社会公布。</div>
    </div>
</body>
</html>

这里写图片描述

5.column-rule 设置列与列之间的边框

语法

column-rule：<column-rule-width> || <column-rule-style> || <column-rule-color>

参数说明

column-rule-width 边框的厚度
column-rule-style 边框的样式
column-rule-color 边框的颜色

PS：特别注意，如果列与列之间的间隙 < 边框的宽度，这就会出现列盖在边框上的情况。

（1）column-rule-width

设置或检索对象的列与列之间的边框厚度。

语法

column-rule-width：<length> | thin | medium | thick;

参数说明

length：用长度值来定义边框的厚度，不允许负值；
medium：定义默认厚度的边框；
thin：定义比默认厚度细的边框；
thick：定义比默认厚度粗的边框。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div.test1,div.test2,div.test3,div.test4{
            border: 10px solid #000000;
            column-count: 3;
            column-gap: 20px;
        }
        div.test1>div,div.test2>div,div.test3>div,div.test4>div{
            background-color: rgb(0,0,0,.3);
        }
        div.test1{
            column-rule: 10px solid #000000;
        }
        div.test2{
            column-rule: thin solid #000000;
        }
        div.test3{
            column-rule: medium solid #000000;
        }
        div.test4{
            column-rule: thick solid #000000;
        }
    </style>
</head>
<body>
    <h3>column-rule-width:10px</h3>
    <div class="test1">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
    </div>
    <h3>column-rule-width:thin</h3>
    <div class="test2">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
    </div>
    <h3>column-rule-width:mediumn</h3>
    <div class="test3">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
    </div>
    <h3>column-rule-width:thick</h3>
    <div class="test4">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
    </div>
</body>
</html>

这里写图片描述
建议使用固定的数字。

（2）column-rule-style 设置边框的样式

设置或检索对象的列与列之间的边框样式。

语法

column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset；

参数说明

none：无轮廓；
hidden：隐藏边框；
dotted：点状轮廓；
dashed：虚线轮廓；
solid：实线轮廓；
double：双线轮廓；
groove：3D凹槽轮廓；
ridge：3D凸槽轮廓；
inset：3D凹边轮廓；
outset：3D凸边轮廓。

注意：如果是有两条线的轮廓，width将会是包括了两条线的距离。

（3）column-rule-color 设置边框颜色

设置或检索对象的列与列之间的边框颜色。

语法

column-rule-color：<color>;

参数说明：指定颜色。没有宽度没有样式，颜色将会失效。默认黑色。

6.column-span 设置元素跨所有列

设置或检索对象元素是否横跨所有列。

语法

column-span：none | all；

参数说明：none：不跨列；all：横跨所有列。
不是像其他column属性用在容器当中，而是用在容器里的子元素当中。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div.test1{
            border: 10px solid #000;
            column-gap: 20px;
            column-count: 3;
            column-rule: 10px solid #000;
        }
        div.test1>div{
            background-color: rgb(0,0,0,.2);
        }
        div.test1>div:nth-of-type(2){
            column-span: all;
        }
    </style>
</head>
<body>
    <div class="test1">
        <div>中新网9月6日电 据江西万安县委宣传部官方微博消息，9月3日，江西省万安县有家长举报多所小学配送的营养餐存在大量腐败变质的问题，孩子食用午餐后出现腹痛。万安县委宣传部今日凌晨透露，截止9月5日18时，有12名学生在医院住院治疗，目前患者腹痛等症状较前好转，病情稳定。供餐企业公司法人和公司安全生产负责人被依法控制，并正在接受进一步调查。</div>
        <div>在5日的一份通报中，万安县委宣传部透露，从9月3日起，万安县已在全县启动对疑似胃肠道疾病的排查，截止9月4日24时，万安有3名学生在赣州市人民医院住院就诊，有1名学生在县人民医院就诊。同时，吉安市和万安县市场和质量监督管理局、万安县教体局已经依法依规对万安珍百味餐饮服务有限公司进行了调查处理。为确保学校营养餐安全，万安县已决定9月4日早餐起，暂停原中标企业(珍百味公司)统一供餐，改由学校自主供餐。</div>
        <div>在6日凌晨的最新通报中，万安县委宣传部透露，经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。经万安县市场和质量监督管理局、教育体育局联合调查组对供餐企业在原料采购、贮存、加工、配送及学校验收等环节进行全面调查，已对万安珍百味餐饮服务有限公司作出了停产、停业行政处罚。目前已对该公司法人和公司安全生产负责人依法控制，并正在进一步调查。</div>
    </div>
</body>
</html>

这里写图片描述

7.column-fill 设置列与列的高度统一（目前主流浏览器都不兼容）

设置或检索对象所有列的高度是否统一。

语法

column-fill: auto默认 | balance;

参数说明：auto：列高度自适应内容；balance：所有列的高度以其中最高的一列统一。
主流浏览器都不兼容此属性。

8.column-break 设置换行

column-break-before 设置指定对象前是否换行。
column-break-after 设置指定对象后是否换行。
column-break-inside 设置对象内部是否换行

（1）column-break-before

设置或检索对象之前是否断行。

语法

column-break-before：auto | always | avoid；

参数说明：auto：既不强迫也不禁止在元素之前断行并产生新列；always：总是在元素之前断行并产生新列；avoid：避免在元素之前断行并产生新列。

（2）column-break-after

设置或检索对象之后是否断行。

语法

column-break-after：auto | always | avoid；

参数说明：auto：既不强迫也不禁止在元素之后断行并产生新列；always：总是在元素之后断行并产生新列；avoid：避免在元素之后断行并产生新列。

（3）column-break-inside属性

设置或检索对象内部是否断行。

语法

column-break-inside：auto默认 | avoid；

参数说明：auto：既不强迫也不禁止在元素内部断行并产生新列；avoid：避免在元素内部断行并产生新列（若元素内容过多也不换到下一段。）

poorpenguin

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS3 基础（8）—— CSS3多列布局（Multi-column）

多列布局（Multi-column）多列布局就是将文本内容设计成像报纸那样的多列布局。兼容性IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1多列布局的属性columns：设置对象的列数和每列的宽度。是复合属性。 2. 1.columns 设置对象的列数个每列的宽度设置或检索对象的列数和每列的宽度。语法：...
复制链接

扫一扫