N宫格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<style type="text/css">
#wrap {
height: 100%;
display: flex;
}
#wrap #main {
display: flex;
flex-flow: row;
flex: 1;
}
.jiu {
display: flex;
flex: 1;
flex-flow: column;
}
.item {
flex: 1;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div class="jiu">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
4
</div>
<div class="item">
3
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
<div class="jiu">
<div class="item">
7
</div>
<div class="item">
8
</div>
<div class="item">
9
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
<div class="item">
3
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {
};
</script>
</html>
N宫格的更多相关文章
- 宫格布局实例（注意jquery的版本号要统一）
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- 宫格布局实例（注意jquery的版本号要统一）2
<!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...
- css-九宫格自适应的实现
高度自适应使用padding 或 padding-bottom + 百分比来实现: 宽度自适应使用width + 百分比来实现. 下面是实现九宫格自适应的代码: <!DOCTYPE html&g ...
- HTML5 Canvas中9宫格的坑
近期小鸟情人游戏上了手机qq空间,一个3岁的游戏来了她的第二春.为了能有更好的表现,我们对其进行了一次改版. 改版当中一项就是对原来的弹出框样式进行改进.将大块木板材质改成纯色(边框为圆角金属材质)样 ...
- 微信小程序多宫格抽奖
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然 ...
- Android自定义多宫格解锁控件
在此之前,一直在想九宫格的实现方法,经过一个上午的初步研究终于完成了一个简单的N*N的宫格解锁组件,代码略显粗糙,仅仅做到简单的实现,界面等后期在做优化,纯粹是学习的目的,在算法上有点缺陷,如果有错误 ...
- vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...
- golang 六宫格、九宫格头像生成
图片示例就不传了,在原WordPress上. //Merge6Grid 6宫格 //rule NO1:至少3张图 最多6张图 // NO2:第一张大小 60*60 其他大小 28*28 间隔4px 合 ...
- Python爬虫学习笔记之微信宫格验证码的识别(存在问题)
本节我们将介绍新浪微博宫格验证码的识别.微博宫格验证码是一种新型交互式验证码,每个宫格之间会有一条 指示连线,指示了应该的滑动轨迹.我们要按照滑动轨迹依次从起始宫格滑动到终止宫格,才可以完成验证,如 ...
- 前端js实现九宫格模式抽奖（多宫格抽奖）
介绍: 前端九宫格是一种常见的抽奖方式,js实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...
随机推荐
- Spring Boot相关组件的添加
在勾选相关组件后, pom.xml文件上发生了根本的变化 1.这是最简单的项目的pom文件 <?xml version="1.0" encoding="UTF-8& ...
- React 官网列子学习
一个有状态的组件 除了接受输入数据(通过 this.props ),组件还可以保持内部状态数据(通过this.state ).当一个组件的状态数据的变化,展现的标记将被重新调用render() 更新. ...
- hadoop启动中缺少datanode
原文链接地址:https://blog.csdn.net/islotus/article/details/78357857 本人测试有效: 首先删除hadoop下的dfs文件(注:本文件不一定在had ...
- C#，什么是Attribute？什么特性？怎么被调用？
定制特性attribute,本质上是一个类,其为目标元素提供关联附加信息,并在运行期以反射的方式来获取附加信息(获取到特性类),相当于优雅的为元素添加了一个tag,这个tag是一个类. Attribu ...
- GridView的 PreRender事件与 RowCreated、RowDataBound事件大乱斗
GridView的 PreRender事件与 RowCreated.RowDataBound事件大乱斗 之前写了几个范例,做了GridView的 PreRender事件与 RowCreated.Row ...
- 使用Intellij IDEA 14.0.2 编译项目耗时特别长的问题
前段时间在使用IDEA编译项目时后台编译会一直Hang在那.如图: 刚开始以为是升级将IDEA从13升级至14的问题,退回到13 问题依就.Google了下,按照相应方法还是无果,没办法 还重装了下系 ...
- World Wind Java开发之八——加载本地缓存文件构建大范围三维场景(
http://blog.csdn.net/giser_whu/article/details/42044599 上一篇博客主要是针对小文件直接导入WW中显示,然而当文件特别大时,这种方式就不太可行.因 ...
- 【BZOJ4300】绝世好题（位运算水题）
点此看题面 大致题意: 给你一个序列\(a\),让你求出最长的一个子序列\(b\)满足\(b_i\&b_{i-1}!=0\). 位运算+\(DP\) 考虑设\(f_i\)表示以第\(i\)个数 ...
- 【BZOJ2809】[APIO2012] dispatching（左偏树例题）
点此看题面 大致题意: 有\(N\)名忍者,每名忍者有三个属性:上司\(B_i\),薪水\(C_i\)和领导力\(L_i\).你要选择一个忍者作为管理者,然后在所有被他管理的忍者中选择若干名忍者,使薪 ...
- 快速排序算法思路分析和C++源代码(递归和非递归)
快速排序由于排序效率在同为O(N*logN)的几种排序方法中效率较高,因此经常被采用,再加上快速排序思想----分治法也确实实用,因此很多软件公司的笔试面试喜欢考这个. 快速排序是C.R.A.Hoar ...