grid网格的流动定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
background: orange;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-size: 3em;
margin-right:15px;
}
.box:nth-child(even) {
background: green;
}
.wrapper {
width: 560px;
border: 1px solid orange;
padding: 15px;
display: grid;
grid-template-columns: repeat(5, 115px);
grid-template-rows: repeat(3,115px);
}
.b {
/*row-1,column-1,row-2,column-2*/
grid-area: 2 / 3 / 3 / 6;
/*相当于*/
/*grid-column: 3 / 6;*/
/*grid-row: 2 / 3;*/
}
.f {
/*行1，列1，行2，列2*/
grid-area:3 /1 / 4 / 6;
/*相当于*/
/*grid-column:1 / 6;*/
/*grid-row:3 / 4; */
}
</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网格的流动定位的更多相关文章
- grid网格的流动grid-auto-flow属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- grid网格的流动一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 【CSS】343- CSS Grid 网格布局入门
CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...
- Grid 网格布局详解
Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...
- 从 NavMesh 网格寻路回归到 Grid 网格寻路。
上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...
- python之tkinter使用-Grid(网格)布局管理器
# 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...
- Android BottomSheet：List列表或Grid网格展示（3）
Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...
随机推荐
- 动态规划--最长上升子序列(Longest increasing subsequence)
前面写了最长公共子序列的问题.然后再加上自身对动态规划的理解,真到简单的DP问题很快就解决了.其实只要理解了动态规划的本质,那么再有针对性的去做这方的题目,思路很快就会有了.不错不错~加油 题目描述: ...
- SparkR(R on Spark)编程指南 含 dataframe操作 2.0
SparkR(R on Spark)编程指南 Spark 2015-06-09 28155 1评论 下载为PDF 为什么不允许复制 关注iteblog_hadoop公众号,并在这里评论区留言 ...
- 关于Unity中3D声音的使用
3D声音 3D立体声和2D声不同的地方是它是会随着距离衰减的,距离越近声音越大,距离越远声音越小. 1: 声音: 背景音乐和音效; 2: 声音文件支持的格式: ogg, mp3, wave, AIFF ...
- 关于DLNA
Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00005587 概念 DLNA的全称是DIGITAL ...
- Ogre2.1 结合OpenGL3+高效渲染
在DX10与OpenGL3+之前,二者都是固定管线与可编程管线的混合,其中对应Ogre1.x的版本,也是结合固定与可编程管线设计.转眼到了OpenGL3+与DX10后,固定管线都被移除了,相对应着色器 ...
- (笔记)Linux下如何查看高CPU占用率线程
在 Linux 下 top 工具可以显示 cpu 的平均利用率(user,nice,system,idle,iowait,irq,softirq,etc.),可以显示每个 cpu 的利用率.但是无法显 ...
- Android 8 AudioPolicy 初始化
记录一下AudioPolicy初始化过程. frameworks\av\media\audioserver\audioserver.rc service audioserver /system/bin ...
- shell编程小结
因为项目中要用到shell脚本,所以系统的看了一下.以前只是泛泛的了解. 变量:环境变量.预定义变量.位置变量.自定义变量. 环境变量这个好说,通过set或者env命令都能看到相应的列表,然后可以通过 ...
- C语言中的运算和运算符
一.运算符的优先级和结合性 1,优先级 运算符一览表中,运算符越靠上,优先级越高. 2,结合性 假如用O表示需要两个操作数的双目运算符,那么对于表达式aObOc: 左结合运算符会将表达式解释为 (a ...
- 第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承
第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...