geckotang · February 6, 2014 08:26
diff --git a/lineup.html b/lineup.html
 <!doctype html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <title></title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="./jquery-1.10.2.min.js"></script>
 <script src="./jquery-lineup.js"></script>

 <script>
 $(function() {
 	$(".item").lineUp();
 });
 </script>
 <style>
 	.list {
 		overflow: hidden;
 		list-style: none;
 		padding:0;
 		margin-left: -15px;
 	}
 	.list li {
 		float: left;
 		width:300px;
 		margin-left: 15px;
 		margin-bottom: 10px;
 		background-color: tomato;
 	}
 	.box {
 		display: inline-block;
 		width: 200px;
 		padding: 10px;
 		margin-right: 10px;
 		vertical-align: top;
 		background-color: gray;
 	}
 	.box-header {
 		padding: 10px;
 		margin-bottom: 10px;
 		background-color: tomato;
 	}
 	.box-footer {
 		padding: 10px;
 		background-color: lime;
 	}
 	.p0 {
 		padding: 0px;
 	}
 	.p20 {
 		padding: 20px;
 	}

 	button {
 		padding: 10px;
 		font-size: 14px;
 	}

 </style>
 </head>
 <body>

 <h1>demo1</h1>

 equal row heights.

 <hr>
 <button class="btn1">reset heights</button>
 <button class="btn2">set heights (sorry. this command isn't in good running order.)</button>
 <hr>


 <ul class="list">
 	<li class="item js-equalrowheights">
 		The quick brown fox jumps over the lazy dog.
 		The quick brown fox jumps over the lazy dog.
 	</li>
 	<li class="item js-equalrowheights">
 		The quick brown fox jumps over the lazy dog.
 	</li>
 	<li class="item js-equalrowheights">
 		The quick
 	</li>
 </ul>


 <div class="item box">
 	<div class="item box-header">The quick brown fox jumps over the lazy dog.</div>
 	<div class="item box-footer">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
 </div>

 <div class="item box">
 	<div class="item box-header p0">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
 	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
 </div>

 <div class="item box">
 	<div class="item box-header p20">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
 	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
 </div>

 <div class="item box">
 	<div class="item box-header">The quick brown fox jumps over the lazy dog.</div>
 	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
 </div>





 </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./jquery-1.10.2.min.js"></script>
	<script src="./jquery-lineup.js"></script>

	<script>
	$(function() {
	$(".item").lineUp();
	});
	</script>
	<style>
	.list {
	overflow: hidden;
	list-style: none;
	padding:0;
	margin-left: -15px;
	}
	.list li {
	float: left;
	width:300px;
	margin-left: 15px;
	margin-bottom: 10px;
	background-color: tomato;
	}
	.box {
	display: inline-block;
	width: 200px;
	padding: 10px;
	margin-right: 10px;
	vertical-align: top;
	background-color: gray;
	}
	.box-header {
	padding: 10px;
	margin-bottom: 10px;
	background-color: tomato;
	}
	.box-footer {
	padding: 10px;
	background-color: lime;
	}
	.p0 {
	padding: 0px;
	}
	.p20 {
	padding: 20px;
	}

	button {
	padding: 10px;
	font-size: 14px;
	}

	</style>
	</head>
	<body>

	<h1>demo1</h1>

	equal row heights.

	<hr>
	<button class="btn1">reset heights</button>
	<button class="btn2">set heights (sorry. this command isn't in good running order.)</button>
	<hr>


	<ul class="list">
	<li class="item js-equalrowheights">
	The quick brown fox jumps over the lazy dog.
	The quick brown fox jumps over the lazy dog.
	</li>
	<li class="item js-equalrowheights">
	The quick brown fox jumps over the lazy dog.
	</li>
	<li class="item js-equalrowheights">
	The quick
	</li>
	</ul>


	<div class="item box">
	<div class="item box-header">The quick brown fox jumps over the lazy dog.</div>
	<div class="item box-footer">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
	</div>

	<div class="item box">
	<div class="item box-header p0">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
	</div>

	<div class="item box">
	<div class="item box-header p20">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
	</div>

	<div class="item box">
	<div class="item box-header">The quick brown fox jumps over the lazy dog.</div>
	<div class="item box-footer">The quick brown fox jumps over the lazy dog.</div>
	</div>





	</body>
	</html>