html表格自动分列,CSS3 Columns:比table更好用的分列式布局方法
本文作者html5tricks,转载请注明出处
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。
CSS代码
CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:
column-count: 列数目
column-gap: 各列之间间隙宽度
column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
column-rule-width:列之间分割线宽度
column-rule-style:列之间分割线风格
column-rule-color:列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式
要想制作出一个漂亮的分列布局,你至少需要用到column-count和column-gap:
/* 3 列,每列之间10px间距 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
}
如果你想美化一下列之间的空隙,这也很简单:
/* 3 列,每列之间10px间距 ,带有金色的隔离线 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;
}
指定的元素还可以横跨多列:
/* 以下面的HTML为例:
表头!
*/
div.col-3 {
column-count: 3;
column-gap: 5px;
}
div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;
}
非常的简单,而且显示结果完全符合我们的预期!
使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。
html表格自动分列,CSS3 Columns:比table更好用的分列式布局方法相关推荐
- html表格自动分列,CSS3 Columns分列式布局方法简介
幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦. CSS代码 CSS3里的colum ...
- html表格自动分列,[css]display: table-cell,用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情--多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
- html表格自动分列,函数在excel的功能 excel用函数实现的分列功能
我是一位教师,想给学生录成绩.可excel中的函数功能使我无法录入100等在工具-选项-常规-函数提示处关闭即可. 函数(function),名称出自数学家李善兰的著作<代数学>.之所以如 ...
- html表格自动分列,html页面中表单怎么用div分列布局
html页面中表单怎么用div分列布局主要分两个步骤操作: 第一种情况,float浮动相同 让两个div盒子的float值相同,比如都设置float:left或float:right,宽度设置合适即可 ...
- latex如何清除表格table的浮动位置(表格自动上移)
一开始,我发现我的表格自动上移,如下: \documentclass{article}\begin{document} hello \begin{table}\centering\begin{tabu ...
- vue vue的table表格自适应_vue table autoHeight(vue 表格自动高度)
小编主要做的都是后台管理系统,采用布局多为头部.左侧菜单栏,右侧内容,头部和菜单栏固定位置,内容部分如果很长就会出现滚动条(iview和element都提供了布局容器),后台管理系统多为表格的增删改查 ...
- vue列表,table表格 自动滚动效果
vue列表,表格自动滚动 安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-sea ...
- php 自动分配数据到个人,数据表格自动分配列宽的一种实现方法
layui数据表格自动分配列宽效果图: 适用场景: 主要是解决窗口大小改变后表格尾列出现空白和滚动条的问题 -窗口由小变大,出现表格尾列出现空白 窗口由大变小,出现横向滚动条 重新加载框架后恢复正常 ...
- 保姆级教程 | 表格自动行合并实现
在 element-ui 和 antv 中都有表格合并,但如何确定哪几行要合并呢? 在随机给定数据的情况下,如何实现自动合并呢?本文将一一解答这些问题. 并在延伸中,谈到了,如何将本文的方法应用到el ...
最新文章
- pandas数据清洗(缺失值、异常值和重复值处理)
- 系统架构设计:平滑发布和ABTesting
- 学习笔记:cache 和spring cache 技术(1)
- 微服务之数据同步Porter
- 初探WCF 如何在配置文件中指定Address?
- Java中field的覆写_Java中方法的覆写
- QT的QDrag类的使用
- c语言 游戏程序,C语言做的推箱子游戏源程序
- 线性直接变换方法对摄像机进行标定
- 移动端报表JS开发示例
- 编译与运行、解释程序与编译程序
- 模块度Q——复杂网络社区划分评价标准
- 【C++】跟着老九君学习记录(一)
- 梅州通风柜设计安装那些事
- 数据结构——课程设计之~安排教学计划
- 可汗学院”(Khan Academy)提出的考验智商的谜题
- 通过组策略实现windows远程协助msra.exe
- MyCat是使用介绍
- C语言实验题目[01]
- 怎么撤销定时说说_操作定时说说怎么取消【图文介绍】
热门文章
- 四股力量逐鹿区块链+供应链金融 纯技术公司靠什么谋得市场?
- 【转载】三叠字和四叠字
- C++面试题之 static关键字
- 学习笔记(四)——AARRR分析模型与漏斗分析法并用excel作图
- python简易贪吃蛇小游戏任务书含代码
- smc数显压力表设定方法_smc真空压力表说明书ZSE30ISE30ACN.pdf
- 问题解决:Word页眉实现左右两端对齐
- mysql 批量修改某一个字段 加前缀,后缀,以及去掉前缀,后缀
- 【Python--数据结构分析】海伦一直使用在线交友网站寻找适合的交友对象,为了方便分析,她将交友数据存放在datingTestSet.csv文件中。
- Linux 命令(9)—— tcpdump 命令