30.多列布局

多列布局

css3 中最新给出多列布局方案，他是css布局的一个新的扩展

一、设置列宽

column-width:具体值 / auto;

1. 具体值是直接设置元素的宽度
2. auto 是 根据页面宽度，自定义列宽

二、设置列数

column-cont：num；

num是具体的正整数，范围是[1,10]

以上两个属性合写 columns: width count;

三、设置列间距

column-gap: normal 或者是具体的数值;

normal 是默认值，他的大小是 1em

四、设置两列之间的边框

column-rule

具体设置规则和css中的border一致

五、设置标题跨列

column-span

只具有两个值

1. none 表示不跨列
2. all 表示跨所有列

.cont{
    width: 600px;
    /* height: 400px; */
    background: #ff0;
    border: 1px #f00 solid;
    margin: 40px auto 0;
    overflow: auto;
    /* 分列的宽度 */
    column-width: 100px;
    /* 分列的列数 */
    column-count: 3;
    /* 合写 */
    columns: 180px 3;
    /* 设置列间距 */
    column-gap: 20px;
    /* 设置两列之间的边框 */
    column-rule: 10px #f00 dashed;
}
.cont h2{
    text-align: center;
    line-height: 50px;
    /* 设置标题跨列 */
    column-span: none;
}

<meta charset="UTF-8">
<!-- 强制浏览器在访问该网页的时候使用最新的edge引擎,如果是谷歌浏览器，则使用最新版的谷歌浏览器 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">

<!-- 如果浏览器是双核浏览器，优先使用 webkit 内核渲染 -->
<meta name="renderer" content="webkit">