html统计筛选表格count,CSS属性参考 | column-count
CSS column-count属性用于指定列的数量。该属性允许你将一个容器中的内容按指定的列数排列为多列布局。
如果你没有指定column-width属性,浏览器会根据容器的空间大小来自动分配列的宽度。
为了制作更加弹性和响应式的多列布局,如果你的多列容器设置了固定的宽度,不建议同时使用column-width和column-count属性。
使用column-count属性可以制作出类似杂志的多列布局效果,例如,如果将column-count属性的值设置为3,会得到类似下图的效果:
官方语法
column-count: | auto
参数:
:指定列的最佳数量。数值必须大于0。如果同时指定了column-width和column-count属性,并且它们的值都不是auto,那么参数值表示列的最大数量。
auto:由其它列属性来决定列的宽度。(例如column-width属性)
column-count属性的初始值为auto。
应用范围
column-count属性可以应用在块级元素,内联块级元素和表格单元格元素上,但是不能应用在表格元素上。
示例代码
下面是column-width属性的一些取值的示例代码:
column-count: 3;
column-count: auto;
column-count: inherit;
经常可以看到多列布局的响应式效果,例如Bootstrap的网格系统,在大屏幕上显示4列,在中等屏幕上显示2列,在小屏幕上显示为1列。下面的代码通过媒体查询来模拟这个效果。
div {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
@media screen and (max-width: 30em) {
div {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
在线演示
下面是一个响应式多列布局的实际例子,调整你的浏览器窗口,看看列的变化情况:
北极熊(拉丁学名:Ursus maritimus),是世界上最大的陆地食肉动物,又名白熊,憨态可掬。外观上通常为白色,也有黄色等颜色,体型巨大,凶猛。
北极熊的视力和听力与人类相当,但它们的嗅觉极为灵敏,是犬类的7倍;奔跑时最快速度可达60km/h,是世界百米冠军的1.5倍。由于全球气温的升高,北极的浮冰逐渐开始融化,北极熊昔日的家园已遭到一定程度的破坏,在未来的不久很可能灭绝,需要人类的保护。
北极熊是现今体型最大的陆上食肉动物之一,成年北极熊直立起来高达2.8米,肩高1.6米。雄性北极熊体重为300-800公斤,雌性为150-300公斤;在冬季来临前脂肪将大量积累,它们的体重可达650公斤。熊掌可达25厘米宽,熊爪可超过10厘米,北极熊奔跑的时速可达40公里,还能在海里以时速10公里游97公里远。
浏览器支持
column-count属性的浏览器兼容性如下图所示:
IE10+和Edge浏览器以及Opera Mini浏览器支持column-count属性。Firefox浏览器需要添加-webkit-前缀:-moz-column-count,Safari 和 Chrome浏览器需要添加-webkit-前缀:-webkit-column-count。
相关阅读
html统计筛选表格count,CSS属性参考 | column-count相关推荐
- html left属性,CSS属性参考 | left
CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...
- html统计筛选表格count,Excel中工作表数据进行计数和筛选的操作方法
execl2007作为办公软件,统计数据的功能十分强大,如何对一个工作表的数据进行计数和筛选,今天,学习啦小编就教大家在Excel中工作表数据进行计数和筛选的操作方法. Excel中工作表数据进行计数 ...
- html统计筛选表格count,Excel表格技巧—统计工作必备的COUNTIF函数的使用方法
[导读]:对于办公室白领而言,这Excel电子表格可以说得上是比较普遍的办公软件了.该软件所具备的功能也是相当的多,尤其是函数这一块,更是功能齐全.很多统计方面的工作,借助Excel函数得以顺利的进行 ...
- html visibility属性,CSS属性参考 | visibility
CSS visibility 属性用于隐藏一个元素. CSS visibility属性用于隐藏一个元素.当取值为hidden时用于隐藏非表格元素,当取值为collapse时用于隐藏表格行或列. 使用v ...
- html5 column-width column-gap,CSS属性参考 | column-width
CSS column-width属性用于指定列的宽度.该属性用于将一个容器制作为弹性多列布局,并为每个列指定一个宽度值. 我们在看杂志的时候经常可以看到多列布局的排版,例如下面的截图: column- ...
- css中的inset,inset() | CSS属性参考
CSS inset()函数是一个图形函数,用于指定某种基本图形类型.inset()函数用于定义矩形. CSS 代表一种基本图形,它通过图形函数来定义一个图形.一个基本图形可以作为shape-outsi ...
- html5语法参考图片,CSS属性参考 | background-image
background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔. background-image属性用于为某个元素设置一个或多个背景图像,各个背景图像以堆叠的方式逐 ...
- html的text-decoration,CSS属性参考 | text-decoration
CSS text-decoration 属性用于设置文本的装饰线(下划线.上划线和删除线),或移除已有的文本装饰线. 在CSS3中,text-decoration属性是text-decoration- ...
- html css checked,:checked | CSS属性参考
CSS :checked伪类用于匹配被用户选中的单选按钮Radio或复选按钮checkbox. :checked伪类用于匹配页面中的,或,或在元素中的选项,当这些元素处于选中状态时,就会被添加:che ...
最新文章
- 【MATLAB】三维图形的绘制mesh
- 《精通自动化测试框架设计》目录—导读
- 课后练习----实现窗口的切换
- maven工程导入项目打开404_Maven依赖配置和依赖范围
- PAT1054 求平均值 (20 分)【从非法输入字符串中获取合法输入 cin.putback()】
- LOOPS HDU - 3853(概率dp,期望)
- linux getline参数,[置顶]linux getline()函数
- 矩形变弧度角_懒惰使人类进步:不想刷马桶,那就让马桶自己变干净丨种草机...
- javascript页面刷新与定时跳转页面
- Perl多线程ping加端口扫描
- uniapp调用c语言方法,uni-app 入坑指南-web开发
- linux 查看指定目录的所有文件大小
- 电脑小技巧:怎么设置默认浏览器
- e会学c语言程序设计基础网课答案,C程序设计(双语版)习题答案
- 甘氨胆酸(Cholylglycine)小麦麦清白蛋白纳米粒|叶酸偶联牛血清白蛋白负载卡铂和紫杉醇靶向纳米粒
- C++期末项目设计------制作一个游戏盒
- 医学图像笔记(八)窗宽窗位
- 《NFL橄榄球》:田纳西泰坦·橄榄1号位
- oracle数据库数据备份
- Invocation Target Exception调用目标异常可能是参数漏传
热门文章
- OneDrive变更及相关记录
- 大年读大学的时候因怀孕书写休学申请书
- 2020 年一线城市程序员工资大调查
- Tomcat实现java与http_java – 使用嵌入式tomcat服务器的JUnit测试,如何为http和https连接器指定自动端口?...
- 数安时代(GDCA)与深信服携手合作,签订战略合作协议
- 深圳软件测试学习:软件测试这个职业能干多久?
- C. Infinite Fence(扩展欧几里得)
- vue进阶之路 webpack打包 持续更新
- 女命論與丈夫的婚姻運
- 高等数学学习笔记——第七十讲——方向导数与梯度