CSS之Multi-columns的跨列
来源:互联网 发布:数组怎么用 编辑:程序博客网 时间:2024/05/17 07:34
column-span主要用来定义一个分列元素中的子元素能跨列多少列。前面大家都知道column-width,column-count等属性让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要基中一段内容或一个标题不进行任何分列,比如说分列元素中的标题不进行分列布局,需要横跨所有列,此时我们就需要用到column-span属性
语法:column-span: none || all
取值说明:
- 1. none:此值为默认值,表示不跨越任何列
- 2. all:这个值跟none刚好相反表示的是元素跨越所有列
html代码上这个例子和前面的稍微改变了一下,就是把内容分成了两个段落p,只不过为了节省空间,我用了(…)代替略去的内容;然后在内容中间多加入了一个标题h2,按照以前的分列布局,不用我说大家都知道会是什么样的效果,但今天我们需要让标题h2不是存在单独的列中,而是需要让整个h2跨列,那就需要今天的column-span,具体的请看下面的代码
效果图明显的告诉了大家,标题达到了我们需要的效果(Safari,Chrome,Opera)——整个标题跨了三列,除了这一点他还告诉我们一个信息。标题h2前面的段落p按列的布局进行了三列布局,然后运行到标题h2给断列了,而h2标题后面的段落P同样按照列的布局属性进行了分列布局。这样一来,如果大家需要在实际应用中将某个元素跨列,别的元素继续分列布局,那么就可以考虑使用今天介绍的column-span
阅读全文
0 0
- CSS之Multi-columns的跨列
- CSS之Multi-columns的列数和列宽
- CSS3 Multi-columns 之跨列
- CSS之Multi-columns的column-gap和column-rule
- CSS3 Multi-columns 之列数和列宽
- CSS3 Multi-columns 之column-gap column-rule
- CSS3多列布局(columns)的用法
- CSS3多列布局(columns)的用法
- Scott Mitchell 的ASP.NET 2.0数据教程之71:处理Computed Columns列
- Crypto Columns加密列
- columns列:Rows 工作表上所有的行
- JSF动态显示列,rich:columns的使用
- xutils3 数据库操作,根据指定的columns列查询数据
- CSS学习笔记:columns
- Oracle 删除列 drop columns
- Web网页布局多列等高之Sliding Faux Columns
- jbuilder之columns应用
- Creating GridView Columns Dynamically (Part 1)--动态创建GridView的列(一)
- leetcode: 628. Maximum Product of Three Numbers
- Hamming distance- leetcode
- centos7 安装mysql57
- JPA入门例子(采用JPA的hibernate实现版本)
- Spring4.X 与 Hibrenate5.X整合
- CSS之Multi-columns的跨列
- 如何优化eclipse?eclipse启动很卡,很慢?性能不好?
- 递归算法及应用
- Unity5.x Time用法详解
- linux虚拟终端之screen命令
- 跨域之Server Proxy
- ios textFild键盘设置
- 网页天幕代码!从css、html到js的完美实现(自执行函数加原型的完美应用)!!
- 【Android API】Android跨进程通信AIDL的使用方法