登录  /  注册
首页 > web前端 > css教程 > 正文

关于CSS3中多列布局columns的相关属性

黄舟
发布: 2017-05-21 15:46:39
原创
1811人浏览过

CSS3中增加了可以实现多列布局的属性 

在此之前的实现很麻烦可能需要各种定位
现在我们只需要一个属性就可以实现
多列布局类似于我们的报纸布局
这样可以方便读者观看

多列数量与多列宽度

如果一行文字太长的话,我们可能会没有读下去的欲望像这样

<p class="demo">......</p>
登录后复制
.demo {    width: 600px;    height: 200px;    border: 1px solid black;}
登录后复制


多列数量column-count可以指定你想要的列数
浏览器会自己设置合适的列宽度

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-count: 3; /*增*/}
登录后复制


不指定列数也可以使用column-width设置列宽度
和上面的代码是等价的

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-width: 11em; /*改*/}
登录后复制

如果你设置的宽度值不足于撑满整个元素
那么浏览器会尽量使用最大的宽度保证列数撑满整个元素
比如说上面的11em改为10em,浏览器同样会显示3列布局

简写的多列语法

column-count与column-width可以合成一个复合属性columns
可以通过这个属性设置列宽、列数、或者两者都有
不过一般使用的时候,设置其中一个属性就能满足我们的需求

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    /*或者columns: 11em;*/
    /*或者columns: 11em 3;*/}
登录后复制

列间隔宽度

多列布局列与列之间存在这间隔
默认的间隔是1em
我们可以通过column-gap属性控制列间隔

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-gap: 2em; /*增*/}
登录后复制

注意如果你的列间隔设置的过大, 文本会溢出的
所以应该配合合适的列数来控制

元素横跨列

我在文本中加入一个标题元素并且改一下高度

<p class="demo"><h1>Angel Beats</h1>......</p>
登录后复制
.demo {    width: 600px;    height: 280px;/*改*/
    border: 1px solid black;    columns: 3;}
登录后复制


默认的情况下,h1元素只是占在第一列中
如果我想要让他置顶在多有列之上,怎么做呢?


对h1元素设置样式

h1 {    column-span: all; <--
    text-align: center;}
登录后复制

column-span可以指定元素横跨的列数默认属性值是1
设置为all,可以让元素横跨所有列

列间隔样式

如果你觉得列与列之间只是空格间隔过于枯燥
我们可以通过column-rule堆列间隔设置“规则”
这个属性是一个复合属性,子属性如下

  • column-rule-width

  • column-rule-style

  • column-rule-color

有点类似于我们设置border属性

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-rule: 1px solid black;}
登录后复制

这样列与列之间就用了一个1像素宽的黑色实线

colum-rule-width除了可以设置像素外,
还有三个关键字thin、medium、thick设置三种宽度
column-rule-style属性值有如下关键字

  • none 无

  • hidden   隐藏

  • dotted   点状

  • dashed   虚线

  • solid    实线

  • double   双线

  • groove   定义 3D grooved 规则

  • ridge    定义 3D ridged 规则

  • inset    定义 3D inset 规则

  • outset定义 3D outset 规则

其中后四种的效果取决于宽度和颜色值,先了解一下


CSS3的多列布局用的比较少
但是最基本的属性我们还是要知道的

以上就是关于CSS3中多列布局columns的相关属性的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号