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网格样式,以一个例子 ...
随机推荐
- cv_bridge中的编码模式与实现
image_encodings.cpp文件是关于图像编码模式的源文件,其中规定了RGB的图像以及深度图的编码模式 该编码文件image_encodings.cpp所依赖的头文件图 命令空间 sens ...
- Matlab基本用法
转至:http://blog.sina.com.cn/s/blog_8354dda801012dyn.html 目录: 一.说明 二.数据类型及基本输入输出 三.流程控制 四.循环 五.数组.数组运算 ...
- 关于Unity中的光照(四)
渲染路径和颜色空间 1:Unity光影效果可以通过设置 渲染路径和颜色空间;2: 渲染路径: 光照到物体表面,物体着色的时候,算上光的颜色的时候有这么几种光照的着色方式,计算着色的方式 forward ...
- linux下压缩与打包工具——gzip, bzip2 和 tar；
以下内容来自:阿铭http://www.apelearn.com/study_v2/chapter11.html, 把常用的写出来了:感觉可以了: 只管压缩与解压缩的工具: gzip 工具: 用的时候 ...
- Java如何格式化月份？
在Java中,如何以MMMM格式格式化时间? 这个示例使用SimpleDateFormat('MMMM')构造函数和SimpleDateFormat类的sdf.format(date)方法来格式化月份 ...
- TPshop隐藏index.php
有些朋友提到关于TPshop 隐藏index.php 一问题, 可以修改 Application\Common\Conf\config.php 文件代码 'common', 'AUTH_CODE' = ...
- tushare使用
tushare是获取行情数据的一款免费软件 使用方法很简单, 先安装:pip install tushare 然后 import tushare as ts 即可. data = ts.get_k ...
- Mysql 8.0.11版本，安装成功，使用Navicat连接失败。
Note:本文只针对mac!! 问题 安装mysql成功之后,想自己弄个数据库试试,但是报错.并不是错误代号,而是一段代码: Authentication plugin 'caching_sha2_p ...
- Web打印控件Lodop实现证件套打
第一次接触Lodop大概是在两年前了,那时候研究Lodop主要是为了验证它能不能实现打印时在不修改内容的前提下调整样式,结果是ok的,如今又一次接触它,是因为工作中需要使用它了,于是再一次碰面 Lod ...
- python调用ansible接口API执行命令
python版本:Python 2.6.6 ansible版本:ansible 2.3.1.0 下载地址:https://releases.ansible.com/ansible/ 调用脚本 ...