码迷,mamicode.com
首页 > 其他好文 > 详细

N宫格

时间:2015-09-03 17:49:12      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

<!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宫格

标签:

原文地址:http://www.cnblogs.com/wln3344/p/4780405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!