本文与《【Ratchet】卡片式布局》（点击打开链接）为姊妹篇，在AmazeUI的官网上没有这种布局，但是，我们可以利用其面板组的方式去实现。
先贴上本网页所处的目录结构，同样地，在windows下的Web文件夹趴了几张图片做实验。当然，为了节省用户的流量与节省服务器的容量，实际的操作中不应该使用如此高清的图片。
做出如下的效果：
其现实的代码如下：
<!--使用HTML5开发-->
<!doctype html>
<html class="no-js">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--自动适应移动屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--优先使用webkit内核渲染-->
<meta name="renderer" content="webkit">
<!--不要被百度转码-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--以下才是引入amazeui资源-->
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<title>card</title>
</head>
<body>
<div class="am-panel-group">
<div class="am-panel am-panel-default">
<!--这里可以指明点击该卡片的跳转-->
<div class="am-panel-bd" onClick="javascript:window.location.href='#'">
<!--在每一个面板中，你可以写自己想写的东西-->
<div style="float:left"><img src="imgs/img7.jpg" width="42" height="42" /></div>
<div style="float:left;margin-left:10px">
<div>标题</div>
<div>ss</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="am-panel am-panel-default">
<div class="am-panel-bd">面板内容</div>
</div>
<div class="am-panel am-panel-default">
<div class="am-panel-bd">面板内容</div>
</div>
</div>
</body>
</html>
原文地址：http://blog.csdn.net/yongh701/article/details/45485235
