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中的calc()功能
Jul 14 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 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
PHP 文件上传全攻略
2010/04/28 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
JS正则表达式验证中文字符
2017/05/08 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
pandas通过索引进行排序的示例
2018/11/16 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
教师评优事迹材料
2014/01/10 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
nginx常用配置conf的示例代码详解
2022/03/21 Servers