本文与《【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>
代替你主持夕阳的葬礼。
