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实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
webpack优化的深入理解
2018/12/10 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python异步存储数据详解
2019/03/19 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python tkinter基本属性详解
2019/09/16 Python
numba提升python运行速度的实例方法
2021/01/25 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
运动会通讯稿100字
2014/01/31 职场文书
春节联欢会主持词
2014/03/24 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
2014年依法行政工作总结
2014/11/19 职场文书