grid布局合并单元格
参考：http://www.w3cplus.com/css3/css-grid-layout-merge-cells.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
/* .wrapper {
display: grid;
grid-template-columns: repeat(4, (col) 100px (gutter) 10px);
grid-template-rows: repeat(4, (row) auto (gutter) 10px);
} */
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;
}
.a {
/*
* grid-column: 1 / 6;
* grid-row: 1 / 2;
*/
grid-column: 1 / span 5;
grid-row: 1;
}
.b {
/*
* grid-column: 7 / 8;
* grid-row: 1 / 10;
*/
grid-column: 7;
grid-row: 1 / span 9;
background: orange;
}
.c {
/*
* grid-column: 1 / 2;
* grid-row: 3 / 4;
*/
grid-column: 1;
grid-row: 3;
}
.d {
grid-column: 3;
grid-row: 3;
}
.e {
grid-column: 5;
grid-row: 3;
}
.f {
grid-column: 1 / span 3;
grid-row: 5;
}
.g {
grid-column: 5;
grid-row: 5;
}
.h {
grid-column: 1;
grid-row: 7;
}
.i {
grid-column: 3 / span 3;
grid-row: 7;
}
.j {
grid-column: 1 / span 5;
grid-row: 9;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
</div>
</body>
</html>
grid布局合并单元格的更多相关文章
- extjs grid合并单元格
http://blog.csdn.net/kunoy/article/details/7829395 /** * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对 ...
- Windows Forms DataGridView中合并单元格
Windows Forms DataGridView 没有提供合并单元格的功能,要实现合并单元格的功能就要在CellPainting事件中使用Graphics.DrawLine和 Graphics.D ...
- poi的合并单元格和冻结行列
//创建工作薄(excel) Workbook wb = new HSSFWorkbook(); //创建sheet Sheet createSheet = wb.createSheet(" ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- Extjs gridpanel 合并单元格
/* * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格.调用方法示例: * *store.on("load",function(){gridSpan(grid,&qu ...
- MiniUI框架合并单元格
在项目中遇到合并单元格的问题,所以总结一下. 用的是miniUI框架,所以只谈miniUI中的单元格合并. (1)必须添加onLoad="onLoad" (2)需要在JS中进行单元 ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- C# 获取Excel中的合并单元格
C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
随机推荐
- 彻底去除Win10“快速访问”
windows10的“快速访问”功能对于我个人用处不大,作为一个爱折腾的人决定尝试彻底除去“快速访问”这个侧边栏. 注意:此操作需要确保你已经设置了[让点击Win10任务栏“文件资源管理器”图标打开“ ...
- Java设计模式（17）解释器模式（Interpreter模式）
Interpreter定义:定义语言的文法,并且建立一个解释器来解释该语言中的句子. Interpreter似乎使用面不是很广,它描述了一个语言解释器是如何构成的,在实际应用中,我们可能很少去构造一个 ...
- TL431的几种常用用法
TL431的主要作用是使得电路获得更稳定的电压,TL431是一种较为精密的可控稳压源,有着较为特殊的动态阻抗.其动态响应速度快,输出噪声低,价格低廉. 注意上述一句话概括,就是便宜,精密可控稳压源TL ...
- Python之collections.defaultdict
转自:http://www.jb51.net/article/88147.htm
- python3 异步模块asyncio
yield方法引入, 这里存在的问题是,如果你想创建从0到1,000,000这样一个很大的序列,你不得不创建能容纳1,000,000个整数的列表. 但是当加入了生成器之后,你可以不用创建完整的序列,你 ...
- static为什么一般与final一起用？
static和final的意义是不同的,static修饰的时候代表对象是静态的,而final修饰的时候代表对象只能赋值一次,他们连用的时候是因为定义的那个对象既要它是静态的,也要求它的值不能再被修改. ...
- javaweb-Excel导入导出后台代码
前言: 导入导出后台java代码写好很久了,但是...但是...前台不会写啊. 先把后台代码帖上吧 1.excelToDb package util; /** * 代码解释:此方法将传入一个URL,即 ...
- Spring JDBC SimpleJdbcCall类示例
org.springframework.jdbc.core.SimpleJdbcCall类是表示对存储过程或存储函数的调用的多线程,可重用的对象. 它提供元数据处理以简化访问基本存储过程/函数所需的代 ...
- Python装饰器、metaclass、abc模块学习笔记
(博客原创作品,转载请注明出处!) 最近接触到了Python中的decorator,metaclass,abc Module,six.add_metaclass等内容,这里做一个简单的笔记. 主要资源 ...
- PLSQL导入Excel文件预览不到数据行问题
今天,从Excel导入Oracle一些数据,在导入的过程中,遇到一个问题,Excel里面有好几万条数据,但是通过PLSQL导入向导导入Excel文件之后,在PLSQL里却预览不到数据行,只能看见标题行 ...