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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 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/07/12 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Javascript注入技巧
2007/06/22 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
js获取Get值的方法
2016/09/29 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
jquery css实现流程进度条
2020/03/26 jQuery
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
python字符串连接方法分析
2016/04/12 Python
python 文件查找及内容匹配方法
2018/10/25 Python
python set内置函数的具体使用
2019/07/02 Python
超简单的Python HTTP服务
2019/07/22 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
英国最大的百货公司:Harrods
2016/08/18 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
学生安全教育材料
2014/02/14 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Python如何配置环境变量详解
2021/05/18 Python