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教程(1):什么是CSS3
Apr 02 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
?算你??的 PHP 程式大小
2006/12/06 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php 静态化实现代码
2009/03/20 PHP
解析PHP提交后跳转
2013/06/23 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python实现Event回调机制的方法
2019/02/13 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
应届生个人求职信模板
2013/11/26 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
门市房租房协议书
2014/12/04 职场文书
行政主管岗位职责
2015/02/03 职场文书
观后感格式
2015/06/19 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书