CSS之Multi-columns的跨列

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详解Microsoft Office Communication Server (OCS) 2007 标准版部署(上)

详解Microsoft Office Communication Server (OCS) 2007 标准版部署(上)前几篇博文中介绍了LCS今天我们来部署ocs,它是lcs的升级版,功能比lcs多个很多,可以视频,多人会议,等多项功能。但是安装起…

awk按分隔符的不同取出不同的列

看下bash代码: #!/bin/bash# get "orderno" and "order_money" from datafile of thisside or otherside, save the result to file xxx.bak# 把金额的单位全部化为:元function get_orderNo_orderMoney(){if [ $1 "|" ];…

Taro+react开发(45)taro中组件生命周期

组件生命周期# 每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用。装载(Mounting)# 这些方法会在组件实例被创建和插入 DOM 中时被调…

Linux命令 - watch

watch命令 功能 execute a program periodically, showing output fullscreen 周期性执行命令并全屏显示结果安装 brew install watch (mac os) 用法 watch command - 基础用法 $ watch date "%Y-%m-%dT%H:%M:%S[%Z]" Every 2.0s: date "%Y-%m-%dT%H:%M:%…

CSS之浮动(一)

1. 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情 2. 浮动的包裹性 撇开浮动的“破坏性”,浮动就是个带有方位的display:inline-block属性 display:inline-block某种意义上的作用就是包…

一个怎样得到treeView值的小例子

阅读全文:http://www.cckan.net/forum.php?modviewthread&tid40 private void treeViewMenu_MouseDown(object sender, MouseEventArgs e) { if (e.Button MouseButtons.Right) { Point ClickPoint new Poi…

jquery miniui , 普加甘特图,流程管理

http://www.miniui.com/docs/quickstart/index.html 普加 甘特图 流程管理 http://www.plusgantt.com/project/demo/Project.html转载于:https://www.cnblogs.com/qq-757617012/p/4021130.html

Taro+react开发(46)taro中环境判断

环境判断 Taro.ENV_TYPE# ENV_TYPE.WEAPP 微信小程序环境ENV_TYPE.SWAN 百度小程序环境ENV_TYPE.ALIPAY 支付宝小程序环境ENV_TYPE.TT 字节跳动小程序环境ENV_TYPE.WEB WEB(H5)环境ENV_TYPE.RN ReactNative 环境ENV_TYPE.QUICKAPP 快应用环境ENV_TYPE.QQ QQ小程序 环境ENV_TYPE…

Linux shell重复执行某命令n次

方法一 for i in {1..10}; do echo "Hello"; done方法二 在~/.bashrc文件中创建一个run函数(函数名字随意): function my_repeat() {number$1shiftfor n in $(seq $number); do$done }使./bashrc生效 souce ~/./bashrc示例 run…

CSS之浮动(二)

1. 浮动的非本职工作 我们只要静下心来好好想想浮动的本质,实现的原理,就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗?即“包裹与破坏”。我们可以用这个(“包裹与破坏”)解释为…

centos配置ftp

centos配置ftp 1、终端命令:yum -y install vsftpd,这样将会自动在网上down and setup vsftpd。 2、创建ftp用户组及用户: $ groupadd ftpgroup $ useradd ftpuser -g ftpgroup -d /webroot/myftpdir -m $ passwd ftpuser 码密 /webroot/myftpdir是ftp用户访问的文件…

iOS8中提示框的使用UIAlertController(UIAlertView和UIActionSheet二合一)

本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494597IOS8UIAlertViewUIActionSheetiOS8推出了几个新的“controller”,主要是把类似之前的UIAlertView变成了UIAlertController,这不经意的改变,貌似把我之前理解的“contro…

嵌入式学习路线

ARMLINUX路线,主攻嵌入式Linux操作系统及其上应用软件开发目标: (1)掌握主流嵌入式微处理器的结构与原理(初步定为arm9) (2)必须掌握一个嵌入式操作系统(初步定为uclinux…

Taro+react开发(47)taro中消息机制

import Taro, { Events } from tarojs/taroconst events new Events()// 监听一个事件,接受参数 events.on(eventName, (arg) > {// doSth })// 监听同个事件,同时绑定多个 handler events.on(eventName, handler1) events.on(eventName, handler2) …

纯js监听滚动条到底部(vue版)

项目中,因为数据量过大,为提高页面性能,采用页面滑动 滚动条到底部的时候再进行数据请求分页,这边给大给个核心,结合vue的生命周期用纯javascript写的一个监听函数 第一个我们需要知道几个属性值,判断滚动…

记腾讯互娱网站布局(1)

1.导航栏 第一步:设置最外层的容器的定位方式、宽度和高度以及背景 第二步:给第二层容器设置内容的居中显示 第三步:设置居中的logo的定位和位置 第四步:设置6个标志的布局 设置所有的导航栏项目的定位和距离顶部的距离&#xff0…

第五——十三章的作业

第五章 1.团队模式和团队的开发模式有什么关系? 答:团队模式指团队的分工模式,团队内部的结构,团队开发模式指团队开发的流程及步骤 2.如果你领头开展一个全新的项目,你要怎么选择“合适”的团队模式? 答&a…

Taro+react开发(48)taro中switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

JS中完美兼容各大浏览器的scrolltop方法

1、各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ; Safari: safari 比较特…

记腾讯互娱网站布局(2)

2.头图特效 给头图设置宽度100%以及定高1110px,同时设置display为table,和定位方式fixed 通过设置绝对定位以及固定宽高和背景的方式来实现 存放动态特效的盒子采用绝对定位,并且触发流体特效以及百分百宽的方式 主图上标志的实现是采用外部容…