首页 > web前端 > css教程 > CSS3 Columns好用的分列式布局

CSS3 Columns好用的分列式布局

小云云
发布: 2017-11-28 13:40:10
原创
2222 人浏览过

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用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制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。

以上内容就是关于css3的columns制作页面布局,希望对大家有帮助。

相关推荐:

怎样用CSS3和JS做出上升的方块动态背景

CSS3的主要功能应用

CSS3怎么做出响应式布局

以上是CSS3 Columns好用的分列式布局的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板