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实现如下,掌握其原理,不论多少宫格,都可以轻松应对.(代码可复制直接运行看效果). 该案例以四宫格入门,可扩展多宫格,奖品模块的布局可自由设置. <! ...
随机推荐
- Android rxjava2的disposable
rxjava+retrofit处理网络请求 在使用rxjava+retrofit处理网络请求的时候,一般会采用对观察者进行封装,实现代码复用和拓展.可以参考我的这篇文章:rxjava2+retrofi ...
- centos 安装 freeswitch，开启与关闭
---恢复内容开始--- 官网说明地址 :https://freeswitch.org/confluence/display/FREESWITCH/CentOS+7+and+RHEL+7 1.获取源码 ...
- uvm_hdl——DPI在UVM中的实现（四）
我们可以在uvm中实现HDL的后门访问,具体包括的function有uvm_hdl_check_path,uvm_hdl_deposit, uvm_hdl_force,uvm_hdl_release, ...
- RStudio Server-0.99.902 (OpenLogic CentOS 7.2)
RStudio Server-0.99.902 (OpenLogic CentOS 7.2) 0 评论 平台: CentOS 类型: 虚拟机镜像 软件包: r-3.2.3 rstudio-server ...
- U盘小偷——C++实现U盘插入检测和文件扫描拷贝
前几天女朋友说老师上课的PPT不共享,没法复习,想着写个U盘小偷拷贝PPT来着,后来觉得这样的行为这是不对的,万一不小心复制了老师的专利啥的,或者一些不可描述的东西,就闹大了. 虽然没有采取实际行动, ...
- GridView的 PreRender事件与 RowCreated、RowDataBound事件大乱斗
GridView的 PreRender事件与 RowCreated.RowDataBound事件大乱斗 之前写了几个范例,做了GridView的 PreRender事件与 RowCreated.Row ...
- MYSQL短索引
优化MYSQL时,可以尽量使用短索引,如果只是为了提高读取的速度,可以优先使用聚合索引,把几个字段聚集在一起,当然缺点在于操作(写)的时候会降低效率,短索引一般都是开头几个字符基本不同的时候,可以考虑 ...
- URL Schemes 不能识别和不能跳转的原因
在app跳转的过程中 需要设置url schemes后,但是设置完后,却不能识别, (测试方式:URL scheme + ://)在浏览器中打开,如果能打开app,就是能跳转 今天遇到了一个坑爹的问题 ...
- 2017.12.11 String 类中常用的方法
1.编写程序将 "jdk" 全部变为大写,并输出到屏幕,截取子串"DK" 并输出到屏幕 package demo; import java.util.Scann ...
- jquery iCheck 插件
1 官网:http://www.bootcss.com/p/icheck/#download 2 博客:https://www.cnblogs.com/xcsn/p/6307610.html http ...