CSS3 Columns:比table更好用的分列式布局方法
2014-12-18 11:36
267 查看
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用
要想制作出一个漂亮的分列布局,你至少需要用到
如果你想美化一下列之间的空隙,这也很简单:
指定的元素还可以横跨多列:
非常的简单,而且显示结果完全符合我们的预期!
使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。
原文来自:webhek
float,
clear,
margin等属性进行调控,避免了很多麻烦。
CSS代码
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
column-rule-width:列之间分割线宽度
column-rule-style:列之间分割线风格
column-rule-color:列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
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为例: <div> <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> */ div.col-3 { column-count: 3; column-gap: 5px; } div.col-3 h2 { column-span: all; text-align:center; background: #eee; }
非常的简单,而且显示结果完全符合我们的预期!
使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。
原文来自:webhek
相关文章推荐
- CSS3 Columns:比table更好用的分列式布局方法
- CSS3----Columns:比table更好用的分列式布局方法
- CSS3 Columns分列式布局方法简介
- 用div实现像table一样的布局方法
- PS切图导出代码后出现的图片布局散乱的解决方法——table布局
- 用div实现像table一样的布局方法
- bootstraptable表格columns 隐藏方法
- Equal Height Columns --DIV+CSS布局中自适应高度的解决方法
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- [html5入门-15]Html布局中简单的table的制作方法
- CSS3多列布局——columns用法
- CSS3 table — 自适应布局表格
- css3中的多列布局columns详解
- 页面布局Table和Div哪个更好
- CSS3多列布局(columns)的用法
- 【CSS3】多列布局——Columns
- ext的table布局的例子(个人觉得目前最适用的布局方法)
- css3-columns多列布局
- CSS3多列布局columns相关属性