前端提高篇（三十九）CSS进阶7：columns多列布局

column-count：num;列数，不论每列宽度多少，列数都是num；

column-width：num;每列宽度不小于num，如果大框宽度小，分多列时，每列只能小于num，就减少列数；

column-gap：列宽，列与列之间的间隙，默认等于font-size；如果设置大框宽度为900，每一列为300，要想列数为3，需要设置列宽为0；

column-rule: 1px dashed royalblue;列之间加线，且不占位置，如大框是900px，每列300px，gap为0，加了column-rule，依然是3行

column-span: all | none;设置all可以让标题横跨整个大框

另：border的style，之前的文章都是使用solid，效果是单实线；双实线是double；dashed虚线

<style>.wrapper {border: 4px double #000;width: 900px;column-width: 300px;column-gap: 0;column-rule: 1px dashed royalblue;}h1 {text-align: center;column-span: all;}
</style>

标题放在了h1里，

效果：

大框边框双实线4px，宽900px；
标题占全行；
正文分3列，列宽300px，列间距为0；
列之间用虚线间隔

前端提高篇（三十九）CSS进阶7：columns多列布局相关推荐

前端提高篇(六十七)：HTML进阶8：canvas画布基本知识（二）绘制图形、曲线，设置图形样式，渐变
绘制图形绘制矩形 1.先创建矩形,再描边: canvas {border: 1px solid #000;width: 200px;height: 200px; } <canvas id=&q ...
前端提高篇（十一）JS进阶8函数参数及arguments
形参与实参基础点可以看这篇文章获取形参个数:函数名.length function add(a,b,c,d,e){console.log('形参个数:' + add.length);} 运行效果: ...
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...
[网络安全自学篇] 三十九.hack the box渗透之DirBuster扫描路径及Sqlmap高级注入用法（三）
这是作者的网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您们喜欢,一起进步.前文详细讲解了hack the box在线渗透平台注册过程,以及Web渗透三道入 ...
Web前端面试指导(三十九)：new操作符具体干了什么呢?
题目点评考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了.一定要对new过程的4个步骤非常清楚 ...
[Python从零到壹] 三十九.图像处理基础篇之图像几何变换（镜像仿射透视）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
Vue实战篇三十：实现一个简易版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Vue实战篇二十九：模拟一个简易留言板
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
【Visual C++】游戏开发笔记三十九浅墨DirectX教程之七他山之石：几种几何体的快捷绘制法
本篇文章里,我们对Direct3D之中几种几何体的简洁绘制方法进行了详细的剖析,最后依旧是提供文章配套的详细注释的demo源代码的欣赏,并在文章末尾提供了源代码下载.(这标题有些歧义的,这个几种是修饰 ...
NeHe OpenGL第三十九课：物理模拟
NeHe OpenGL第三十九课:物理模拟物理模拟简介: 还记得高中的物理吧,直线运动,自由落体运动,弹簧.在这一课里,我们将创造这一切. 物理模拟介绍如果你很熟悉物理规律,并且想实现它,这篇 ...

前端提高篇（三十九）CSS进阶7：columns多列布局

前端提高篇（三十九）CSS进阶7：columns多列布局相关推荐

最新文章

热门文章