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] ///参数为要合并的列}) /** * ...
随机推荐
- Altium Designer 规则设置
设计规则设置 Designer Rules Check(DRC) Electrical 电气规则.安全间距,线网连接等 Routing 布线,线宽.过孔形状尺寸.布线拓扑.布线层.封装出线等 SMT ...
- 微信小程序——购物车数字加减
上一篇,我们有讲到如何造一个购物车弹层.今天来说一下,购物车数量的加减如何实现. 主要思路就是在data里面定义一个属性,属性值就是这个数量.点击+的时候就+1,点击-的时候就-1,再结合setDat ...
- Caused by:java.lang.IllegalStateException at android.media.MediaPlayer._setDataSource(Native Method)
使用Mediaplayer播放本地音频,在第二次调用mediaplayer.setDataSource()时报错如下: Caused by: java.lang.IllegalStateExcepti ...
- 移动互联网App兼容性测试
我建议大家也可以参考一些针对App监测和统计的网站,都非常有意义,具体如下: 友盟品牌手机排行榜 http://www.umeng.com/ 移动观象台 https://www.talkingd ...
- 4、QT分析之调试跟踪系统
原文地址:http://blog.163.com/net_worm/blog/static/127702419201002004518944/ 在我们前面的分析中,经常看到qWarning()和qDe ...
- dd&win32diskimager&软碟通Ultraiso 简单分析区别和长处
在linux操作系统之中的话我们希望烧录镜像到U盘或者是其他的可移动存储设备的话,那么我们就是应当使用dd,但是我估量 在我们的论坛之中根本 之上只有很少的人使用这种工具,很多的使用linux的用户都 ...
- Mxnet学习资源
MxNet 学习笔记(1):MxNet中的NDArray http://mxnet.incubator.apache.org/api/python/symbol/symbol.html api文档 M ...
- SQLSERVER中统计所有表的记录数
SQLSERVER中统计所有表的记录数 利用系统索引表sysindexes中索引ID indid<1的行中的rows列存有该表的行数这一特点. 方法是利用隐藏未公开的系统存储过程sp_MS ...
- JDBC创建数据库实例
在本教程将演示如何在JDBC应用程序中创建数据库. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式中创建数据库. 要执行以下示例,需要用实际用户名和密码替换这里用 ...
- SPRING---------配置文件的命名空间
两种格式的配置文件: DTD和Schema区别: Schema是对XML文档结构的定义和描述,其主要的作用是用来约束XML文件,并验证XML文件有效性.DTD的作用是定义XML的合法构建模块,它使用一 ...