博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS自学笔记(15):CSS3多列布局
阅读量:4649 次
发布时间:2019-06-09

本文共 1098 字,大约阅读时间需要 3 分钟。

在CSS3中,也新增了一些关于文本布局的几个比较简单的属性。通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样。

新增的部分属性,以及浏览器支持情况:

属性 浏览器支持
column-count IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-gap IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-rule IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera

注:

  • 在Firefox浏览器中,要加(-moz-)前缀。
  • 在Chrome和Safari浏览器中,要加(-webkit-)前缀。
  • 对于IE浏览器,只支持IE10以及以上版本。

新增的属性以及描述:

属性 描述
column-count 定义元素应该被分隔的列数
column-fill 定义列的填充方式
column-gap 定义列之间的间隔距离
column-rule column-rule属性的简写属性,定义列之间的规则
column-rule-color 定义列之间的规则颜色
column-rule-style 定义列之间的规则样式
column-rule-width 定义列之间的规则宽度
column-span 定义元素应该横跨的列数
column-width 定义列的宽度
columns column-width 和 column-count 的简写属性

通过这几个新增属性的定义,我可以对文本进行简单的排版(Firefox浏览器)

*{	-moz-column-count: 3;	-moz-column-gap: 40px;	-moz-column-rule: 4px outset #ff0000;"}

上面的CSS样式是元素中的文本分为3列,列之间的距离为40px,列之间用颜色为#ff0000、宽度为4px的线分开。

同样,我们也可以对一些元素中的内容进行排版。

例如我们可以对列表进行排版:

部分代码为(Firefox浏览器):

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

转载于:https://www.cnblogs.com/lonzhe/p/3932666.html

你可能感兴趣的文章
AOJ 2249 Road Construction(Dijkstra+优先队列)
查看>>
BZOJ 1098 [POI2007]办公楼biu(反向图bfs+并查集优化)
查看>>
文件操作+函数基础day09
查看>>
ssh无密码登录设置方法以及出现问题 ECDSA host key 和IP地址对应的key不同的解决...
查看>>
Hibernate和MyBatis的对比
查看>>
Loadrunner 11 对Windows操作系统和浏览器的要求
查看>>
Python学习day8(文件操作)
查看>>
为什么 jmeter 分布式测试,一定要设置 java.rmi.server.hostname
查看>>
ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(1)用户注册
查看>>
pandas介绍及环境部署
查看>>
压缩解压命令流
查看>>
php yii Redis实现并发锁
查看>>
smyfony2-curd-数据库创建
查看>>
[Android]File-Output和InputStream的存取
查看>>
开发环境的坑
查看>>
站点高可用方案例子
查看>>
Spring(Bean)3
查看>>
MVC框架和MTV框架
查看>>
小学生运算题目生成器说明书
查看>>
shell -- sed用法
查看>>