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样式无效的十个重要原因详解
Aug 10 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 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缓存技术详细总结
2013/08/07 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
js 小数取整的函数
2010/05/10 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python常用内置函数总结
2015/02/08 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
为什么python比较流行
2020/06/19 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
.NET面试问题集
2015/12/08 面试题
信用卡催款律师函
2015/05/27 职场文书
学习经验交流会策划书
2015/11/02 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript