多列布局
css3 中最新给出多列布局方案,他是css布局的一个新的扩展
一、设置列宽
column-width:具体值 / auto;
- 具体值是直接设置元素的宽度
- auto 是 根据页面宽度,自定义列宽
二、设置列数
column-cont:num;
num是具体的正整数,范围是[1,10]
以上两个属性合写 columns: width count;
三、设置列间距
column-gap: normal 或者是具体的数值;
normal 是默认值,他的大小是 1em
四、设置两列之间的边框
column-rule
具体设置规则和css中的border一致
五、设置标题跨列
column-span
只具有两个值
- none 表示不跨列
- 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">