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动画技术
Jan 01 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
css3带你实现3D转换效果
Feb 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
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
使用Python设计一个代码统计工具
2018/04/04 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python开发前景如何
2020/06/11 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
周年庆典邀请函范文
2014/01/23 职场文书
护士岗位职责
2014/02/16 职场文书
国培计划培训感言
2014/03/11 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python OpenGL基本配置方式
2022/05/20 Python