CSS3 Columns分列式布局方法简介


Posted in HTML / CSS onMay 03, 2014

幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:

1.column-count: 列数目
2.column-gap: 各列之间间隙宽度
3.column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
4.column-rule-width:列之间分割线宽度
5.column-rule-style:列之间分割线风格
6.column-rule-color:列之间分割线演示
7.column-span: 允许一个元素的宽度跨越多列
8.column-fill: 分列方式

要想制作出一个漂亮的分列布局,你至少需要用到column-count和column-gap:

复制代码
代码如下:

/* 3 列,每列之间10px间距 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
}

如果你想美化一下列之间的空隙,这也很简单:
复制代码
代码如下:

/* 3 列,每列之间10px间距 ,带有金色的隔离线 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;
}

指定的元素还可以横跨多列:
复制代码
代码如下:

/* 以下面的HTML为例:</p> <p><div class="col-3 lazy ">
<h3>表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div></p> <p> */
div.col-3 {
column-count: 3;
column-gap: 5px;
}</p> <p>div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;
}

非常的简单,而且显示结果完全符合我们的预期!

使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 #HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 #HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 #HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 #HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
一个取得文件扩展名的函数
2006/10/09 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
详谈PHP编码转换问题
2015/07/28 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
python类的继承实例详解
2017/03/30 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
商场消防演习方案
2014/02/12 职场文书
员工自我工作评价
2015/03/06 职场文书
小学生节水倡议书
2015/04/29 职场文书
教师教育心得体会
2016/01/19 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS