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中Color的一些特性介绍
May 27 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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/10/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery禁用右键示例
2014/04/28 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
jQuery实现增删改查
2020/12/22 jQuery
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python正则捕获操作示例
2017/08/19 Python
Python交互环境下实现输入代码
2018/06/22 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
python爬虫请求头设置代码
2020/07/28 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
遗嘱公证书标准样本
2014/04/08 职场文书
学生请假条
2014/04/11 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
教师考核鉴定意见
2015/06/05 职场文书
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android